/* Page module: catalog.css
   v3_1_41 starts safe scoped catalog pass.
   Only selectors under .catalog-page-v41 should be added here until catalog/factory audit is complete. */

.catalog-page-v41 .jit-product-card {
  box-sizing: border-box;
}

.catalog-page-v41 .jit-product-main-photo,
.catalog-page-v41 .jit-product-thumb,
.catalog-page-v41 .jit-product-thumb img,
.catalog-page-v41 .jit-product-main-photo img {
  user-select: none;
}

/* v3_1_43: Catalog MTM / RTW scoped visual pass.
   Only .catalog-page-v43. No legacy cleanup and no order/storage/backend changes. */
.catalog-page-v43.catalog-panel {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}
.catalog-page-v43 .catalog-heading h1,
.catalog-page-v43 .jit-factory-section h2,
.catalog-page-v43 .jit-product-title {
  color: var(--text);
}
.catalog-page-v43 .catalog-filter select {
  background: var(--field-bg);
  color: var(--text);
  border-color: var(--line);
}
.catalog-page-v43 .jit-factory-section {
  background: var(--section-bg);
  border-color: var(--line);
}
.catalog-page-v43 .jit-factory-section-head {
  border-color: var(--line);
}
.catalog-page-v43 .jit-product-card {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 14px 38px rgba(20, 16, 14, .06);
}
.catalog-page-v43 .jit-product-main-photo,
.catalog-page-v43 .jit-product-thumb,
.catalog-page-v43 .jit-product-photo-empty {
  background: var(--field-bg);
  border-color: var(--line);
}
.catalog-page-v43 .jit-product-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}
.catalog-page-v43 .empty-state {
  background: var(--field-bg);
  color: var(--muted);
  border-color: var(--line);
}

/* v3_1_44: Catalog MTM / RTW scoped pass 2.
   This layer is page-specific and intentionally does not remove legacy rules yet. */
/* v3.8.46: каталог занимает ту же ширину, что и страница фабрик (которая без
   max-width-капа). Раньше каталог упирался в 1560px и центрировался → на широком
   экране был ýже и крошки смещались вправо/вниз относительно фабрики. Теперь обе
   страницы тянутся на всю ширину контента .main → крошки совпадают. */
.catalog-page-v44.catalog-panel {
  max-width: none;
}

.catalog-page-v44 .catalog-filter {
  max-width: 260px;
  margin: 0 0 34px;
}

.catalog-page-v44 .catalog-filter label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 500;
}

.catalog-page-v44 .catalog-filter select {
  min-height: 46px;
  border-radius: var(--radius-sm, 12px);
  padding: 0 42px 0 16px;
}

.catalog-page-v44 .jit-factory-sections {
  display: grid;
  gap: 30px;
}

.catalog-page-v44 .jit-factory-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  padding: 18px 20px 20px;
  background: var(--section-bg, var(--panel));
  box-shadow: 0 18px 44px rgba(20, 16, 14, .05);
}

/* v3.8.19: компактная шапка секции — как на «Моей фабрике» (без тяжёлого
   разделителя и большого провала перед сеткой карточек). */
.catalog-page-v44 .jit-factory-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 0;
  margin-bottom: 14px;
  border-bottom: none;
}

.catalog-page-v44 .jit-factory-section-head h2 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.catalog-page-v44 .jit-products-grid {
  display: grid;
  gap: 22px;
  align-items: start;
}

.catalog-page-v44 .jit-product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  background: var(--panel);
  overflow: visible;
}

.catalog-page-v44 .jit-product-media {
  display: grid;
  grid-template-rows: auto auto;  /* override legacy var(--jit-card-main-h) auto */
  gap: 12px;
}

.catalog-page-v44 .jit-product-main-photo {
  position: relative;  /* v3.8.67: контейнер для absolute-фото (см. ниже) */
  width: 100%;
  height: auto;        /* override legacy height: var(--jit-card-main-h) */
  max-height: none;    /* override legacy max-height: var(--jit-card-main-h) */
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line-soft, var(--line));
}

/* v3.8.67: фото — position:absolute (вне потока), как на «Моей фабрике». Иначе
   при ОБЫЧНОЙ перезагрузке (фото из кэша) grid-строка `auto` берёт высоту из родных
   размеров уже доступной картинки → фото «сплющено», потом aspect-ratio вытягивает
   его → видимый рывок по высоте. Без кэша картинки ещё нет → бага нет. Absolute
   убирает картинку из расчёта высоты строки → высота всегда из aspect-ratio. */
.catalog-page-v44 .jit-product-main-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.catalog-page-v44 .jit-product-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  height: auto;        /* override legacy height: var(--jit-card-thumb-h) */
  max-height: none;    /* override legacy max-height: var(--jit-card-thumb-h) */
}

.catalog-page-v44 .jit-product-thumb {
  position: relative;  /* v3.8.67: контейнер для absolute-фото */
  aspect-ratio: 1 / 1;
  height: auto;        /* override legacy height: var(--jit-card-thumb-h) */
  max-height: none;    /* override legacy max-height: var(--jit-card-thumb-h) */
  min-width: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line-soft, var(--line));
  background: var(--field-bg);
}

/* v3.8.67: absolute — та же причина, что у главного фото (кэш + grid auto) */
.catalog-page-v44 .jit-product-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.catalog-page-v44 .jit-product-card:not(.jit-product-card-admin) .jit-order-button {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}

@media (max-width: 900px) {
  .catalog-page-v44.catalog-panel {
    max-width: calc(100vw - 28px);
  }

  .catalog-page-v44 .jit-factory-section {
    padding: 18px;
  }

  .catalog-page-v44 .jit-products-grid {
    gap: 16px;
  }
}