/* Категория каталога с подкатегориями
   (Figma 1:7628 list-view, 1:7922 grid-view, 1:8216 «ничего не найдено»;
   в макете фреймы называются «сравнение товаров - пустое») */

/* Локальные токены страницы (значения из design context) */
.category {
  /* Токены карточек товара из catalog.css — блок «Товары раздела» */
  --card-border: #e5e7eb;
  --card-yellow: #ffd600;
  --card-text: #1a1a1a;
  --card-gray: #717182;
  --card-green: #10b981;

  --cat-panel-bg: #f8fafc;
  --cat-border: #e5e7eb;
  --cat-border-chip: #e2e8f0;
  --cat-text-dark: #1e293b;
  --cat-text-gray: #64748b;
  --cat-text-light: #94a3b8;
  --cat-text-mid: #555555;
  --cat-yellow-active: #ffcb05;
  --cat-active-bg: #fcf9e3;
  --cat-banner-bg: #fcf7e8;
  --cat-media-bg: #f5f5f5;
  --cat-card-shadow: 0 4px 6px rgba(31, 31, 31, 0.04);
}

/* --- Заголовок (1:7784): 35px Bold #3a362d --- */
.category__title {
  margin: 0 0 24px;
  font-weight: var(--fw-bold);
  font-size: 35px;
  line-height: 35px;
  letter-spacing: var(--ls-base);
  color: var(--text-brown-dark);
}

/* --- Раскладка: сайдбар 280 + контент 868, gap 32 --- */
.category__layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: 64px;
}

.category-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.category__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 0;
  min-width: 0;
}

/* --- Сайдбар категорий (1:7786 Categories-Block) --- */
.category-nav {
  padding: 12px;
  border: 1px solid var(--cat-border, #e5e7eb);
  border-radius: 12px;
  background: var(--cat-panel-bg, #f8fafc);
}

.category-nav__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-left: 4px solid transparent;
  font-size: 14px;
  line-height: 1.2;
  color: var(--cat-text-mid, #555555);
}

.category-nav__row:hover .category-nav__name {
  color: var(--text-dark-900);
}

/* Активная категория: жёлтая полоса слева + Bold (1:7787) */
.category-nav__row.is-active {
  border-left-color: var(--yellow-500);
  background: var(--cat-active-bg, #fcf9e3);
  font-weight: var(--fw-bold);
  color: var(--text-dark-900);
}

.category-nav__name {
  flex: 1 1 0;
  min-width: 0;
}

.category-nav__arrow {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--cat-text-light, #94a3b8);
}

.category-nav__row.is-active .category-nav__arrow {
  color: var(--cat-yellow-active, #ffcb05);
}

/* --- Баннер категории (1:7827 Category-Promo-Banner) --- */
.category-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border-radius: 16px;
  background: var(--cat-banner-bg, #fcf7e8);
}

.category-banner__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
}

.category-banner__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.category-banner__title {
  font-weight: var(--fw-bold);
  font-size: 28px;
  line-height: 1.2;
  color: var(--text-dark-900);
  text-transform: uppercase;
}

.category-banner__badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--text-brown-dark);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
}

.category-banner__desc {
  font-size: 14px;
  line-height: 22px;
  color: var(--cat-text-mid, #555555);
}

/* Фото категории в жёлтой рамке (1:7834 Banner-Graphic, 180x180) */
.category-banner__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid var(--yellow-500);
  border-radius: 12px;
  background: #ffffff; /* картинки категорий часто с прозрачным фоном */
  overflow: hidden;
}

.category-banner__photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- Мобильные чипы соседних категорий (Figma 1:3575 category-scroll) ---
   На десктопе скрыты, включаются в @media 1023 */
.category-cats {
  display: none;
}

/* --- Чипы под-категорий (1:7837 Subcategory-Chips) --- */
.category-chips {
  display: flex;
  gap: 12px;
}

.category-chips__item {
  flex: 1 1 0;
  min-width: 0;
}

.category-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--cat-border-chip, #e2e8f0);
  border-radius: 8px;
  background: #ffffff;
}

.category-chip:hover {
  border-color: var(--yellow-500);
}

.category-chip__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--cat-panel-bg, #f8fafc);
}

.category-chip__label {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-bold);
  font-size: 13px;
  line-height: 1.2;
  color: var(--cat-text-dark, #1e293b);
}

/* --- Тулбар (1:7858 Control-Row) --- */
.category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--cat-panel-bg, #f8fafc);
}

/* Заголовок «Подкатегории» (Figma 1:3695) — только mobile */
.category-toolbar__title {
  display: none;
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-dark-900);
}

.category-toolbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* Поиск подкатегории (1:7860): 240x46 */
.category-toolbar__search {
  width: 240px;
  height: 46px;
  padding: 6px 12px;
  border: 1px solid var(--cat-border, #e5e7eb);
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
  line-height: 1;
  color: var(--cat-text-dark, #1e293b);
}

.category-toolbar__search::placeholder {
  color: var(--cat-text-light, #94a3b8);
}

.category-toolbar__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.category-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-toolbar__sort-label {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--cat-text-gray, #64748b);
}

.category-toolbar__sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 14px 0 0;
  border: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5h7L5 7.5z' fill='%2364748b'/%3E%3C/svg%3E")
    right center / 10px 10px no-repeat;
  font-weight: var(--fw-bold);
  font-size: 13px;
  line-height: 1;
  color: var(--cat-text-dark, #1e293b);
  cursor: pointer;
}

.category-toolbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.category-toolbar__count {
  font-size: 13px;
  line-height: 1;
  color: var(--cat-text-gray, #64748b);
  white-space: nowrap;
}

.category-toolbar__views {
  display: flex;
  gap: 8px;
}

/* Кнопки вида (1:7869 Icons-Box): 28px, активная — жёлтая #ffcb05 */
.category-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cat-border, #e5e7eb);
  border-radius: 4px;
  background: #ffffff;
}

.category-view-btn.is-active {
  border-color: var(--cat-yellow-active, #ffcb05);
  background: var(--cat-yellow-active, #ffcb05);
}

.category-view-btn__icon--active {
  display: none;
}

.category-view-btn.is-active .category-view-btn__icon--default {
  display: none;
}

.category-view-btn.is-active .category-view-btn__icon--active {
  display: block;
}

/* --- Подкатегории: вид «список» (1:7881), 2 колонки --- */
.subcat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.subcat-grid[hidden] {
  display: none;
}

/* Карточка списка (1:7882 Subcategory-Card) */
.subcat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--cat-border, #e5e7eb);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--cat-card-shadow);
}

/* Ховер — жёлтая рамка (как выделенная карточка 1:8176) */
.subcat-card:hover {
  border-color: var(--yellow-500);
  box-shadow: inset 0 0 0 1px var(--yellow-500), var(--cat-card-shadow);
}

/* Плейсхолдер с иконкой 80x80 (1:7883 Image-Placeholder) */
.subcat-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--cat-media-bg, #f5f5f5);
}

/* Фото товара в list-виде (Figma 1:3589) — показывается только на mobile */
.subcat-card__media-photo {
  display: none;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
}

.subcat-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

/* «Перейти в раздел ›» (Figma 1:3594) — только mobile */
.subcat-card__action {
  display: none;
  gap: 4px;
  font-weight: var(--fw-bold);
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-gray-blue);
}

.subcat-card__name {
  /* Полное название, обрезка — не более 3 строк (макет 1:7628) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  /* Мягкий перенос: слово рвётся только если иначе не влезает */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1.25;
  color: var(--text-dark-900);
}

.subcat-card__count {
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-gray-blue);
}

/* Стрелка в круге (1:7889 Go-Button) */
.subcat-card__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--cat-border, #e5e7eb);
  border-radius: 16px;
  background: var(--cat-panel-bg, #f8fafc);
  font-weight: var(--fw-bold);
  font-size: 12px;
  line-height: 1;
  color: var(--text-dark-900);
}

/* --- Подкатегории: вид «плитка» (1:8175), 3 колонки --- */
.subcat-grid--tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Карточка плитки (1:8176): колонкой, фото по центру */
.subcat-card--tile {
  flex-direction: column;
  align-items: stretch;
}

/* Бейджи плитки (Figma 1:3798/1:3805) — только mobile */
/* «популярно» (1:3798): #fff0e0 + #ef4444 */
.subcat-card--tile .subcat-card__name {
  /* В плитке — одна строка с многоточием (макет 1:7922) */
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
}

/* Область фото (1:8179 Image-Area): 100px, фото 80x80 */
.subcat-card--tile .subcat-card__media {
  width: 100%;
  height: 100px;
  background: var(--cat-panel-bg, #f8fafc);
}

.subcat-card--tile .subcat-card__media img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
}

.subcat-card--tile .subcat-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.subcat-card--tile .subcat-card__count {
  font-size: 12px;
}

/* --- «Ничего не найдено» (1:8469 Empty-State-Block) --- */
.category-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 64px;
  border: 1px solid var(--cat-border, #e5e7eb);
  border-radius: 12px;
  background: var(--cat-panel-bg, #f8fafc);
  text-align: center;
}

.category-empty[hidden] {
  display: none;
}

/* Круг с (!) (1:8470 Icon-Container): 80px, #fcf9e3 + жёлтая обводка */
.category-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border: 2px solid var(--yellow-500);
  border-radius: 50%;
  background: var(--cat-active-bg, #fcf9e3);
}

.category-empty__text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.category-empty__title {
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-brown-dark);
  overflow-wrap: anywhere;
}

.category-empty__text {
  max-width: 500px;
  font-size: 15px;
  line-height: 22px;
  color: var(--cat-text-mid, #555555);
}

.category-empty__reset {
  padding: 12px 24px;
  border-radius: 8px;
  background: var(--yellow-500);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-dark-900);
}

.category-empty__reset:hover {
  background: var(--yellow-450);
}

/* ============================================================
   Адаптив
   ============================================================ */

@media (max-width: 1279px) {
  /* Сайдбар чуть уже, чтобы карточкам хватало места */
  .category-sidebar {
    width: 250px;
  }

  .category__layout {
    gap: 20px;
  }
}

@media (max-width: 1023px) {
  /* Сайдбар скрывается (логика проекта, как в catalog.css) */
  .category-sidebar {
    display: none;
  }

  .category__title {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 1.2;
  }

  .category__layout {
    padding-bottom: 40px;
  }

  .category__content {
    gap: 16px;
  }

  /* Десктопные чипы под-категорий на mobile скрыты:
     вместо них — переключатели соседних категорий (Figma 1:3575) */
  .category-chips {
    display: none;
  }

  /* Чипы соседних категорий: горизонтальный скролл, активный — жёлтый */
  .category-cats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-cats::-webkit-scrollbar {
    display: none;
  }

  .category-cats__item {
    flex: 0 0 auto;
  }

  /* Чип категории (1:3576/1:3578): pill 20px, 12px текст */
  .cat-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--cat-border, #e5e7eb);
    border-radius: 20px;
    background: #ffffff;
    font-weight: var(--fw-medium);
    font-size: 12px;
    line-height: 1.2;
    color: var(--text-dark-900);
    white-space: nowrap;
    cursor: pointer;
  }

  .cat-chip.is-active {
    border-color: #ffd600;
    background: #ffd600;
    font-weight: var(--fw-bold);
  }

  /* Тулбар (Figma 1:3694 filter-bar): поиск на всю ширину,
     затем «Подкатегории» + сортировка, ниже счётчик + вид */
  .category-toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .category-toolbar__left {
    display: contents;
  }

  .category-toolbar__search {
    order: 1;
    width: 100%;
  }

  .category-toolbar__title {
    display: block;
    order: 2;
    margin-right: auto;
  }

  /* Сортировка как чип (Figma 1:3697 Button-Mobile-Sort-Chip): 33px, radius 8 */
  .category-toolbar__sort {
    order: 3;
    height: 33px;
    padding: 0 12px;
    border: 1px solid var(--cat-border, #e5e7eb);
    border-radius: 8px;
    background: #ffffff;
  }

  .category-toolbar__sort-label {
    display: none;
  }

  .category-toolbar__sort-select {
    font-weight: var(--fw-regular);
    font-size: 12px;
  }

  .category-toolbar__right {
    order: 4;
    width: 100%;
    justify-content: space-between;
  }

  /* List-карточка (Figma 1:3588): фото 80px, счётчик над названием,
     «Перейти в раздел ›» вместо стрелки в круге */
  .subcat-card {
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
  }

  .subcat-card__media {
    border-radius: 6px;
    background: none;
  }

  .subcat-card__media-icon {
    display: none;
  }

  .subcat-card__media-photo {
    display: block;
  }

  .subcat-card__body {
    gap: 4px;
  }

  .subcat-card__count {
    order: -1;
    font-size: 11px;
  }

  .subcat-card__name {
    font-size: 14px;
    line-height: 1.3;
  }

  .subcat-card__action {
    display: inline-flex;
    align-items: center;
  }

  .subcat-card__go {
    display: none;
  }

  /* Плитка (Figma 1:3796): бейдж, фото 60px, название и счётчик по центру */
  .subcat-card--tile {
    gap: 10px;
    align-items: center;
    border-radius: 10px;
  }

  .subcat-card--tile   .subcat-card--tile .subcat-card__media {
    order: 1;
    width: 60px;
    height: 60px;
    background: none;
  }

  .subcat-card--tile .subcat-card__media img {
    width: 60px;
    height: 60px;
  }

  .subcat-card--tile .subcat-card__name {
    order: 2;
    white-space: normal;
    overflow: visible;
    text-align: center;
    font-size: 13px;
    line-height: 1.3;
  }

  .subcat-card--tile .subcat-card__bottom {
    order: 3;
    justify-content: center;
  }

  .subcat-card--tile .subcat-card__count {
    order: 0;
    font-size: 11px;
  }

  /* Список — в 1 колонку, плитка — в 2 */
  .subcat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .subcat-card__name {
    overflow-wrap: anywhere;
  }

  .subcat-grid--tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  /* Баннер: колонкой, фото под текстом */
  .category-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }

  .category-banner__title {
    font-size: 22px;
  }

  .category-banner__photo {
    width: 150px;
    height: 150px;
    align-self: center;
  }
}

@media (max-width: 479px) {
  .category__title {
    font-size: 20px;
  }

  .category-banner {
    padding: 20px 16px;
  }

  .category-banner__title {
    font-size: 18px;
  }

  .category-banner__badge {
    font-size: 14px;
  }

  /* Плитка остаётся в 2 колонки (Figma 1:3795: карточки ~171px на 390) */

  .category-empty {
    padding: 40px 16px;
  }

  .category-empty__title {
    font-size: 18px;
  }
}

/* --- Товары самого раздела под сеткой подкатегорий --- */
.category-own {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-own__title {
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.2;
  color: var(--text-dark-900);
}

.category-own__grid.product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .category-own__grid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .category-own__grid.product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}