/*
 * Карточки каталога на produktsiya.html — та же структура и визуал, что на главной
 * (.home-products-strip / .home-product-card). Все карточки в одной сетке .home-products-strip--all.
 */

/*
 * Ширина бордового блока и сетки — как на главной: почти на всю белую колонку,
 * с одинаковыми полями по бокам (референс: блок с категориями и сетка совпадают по ширине).
 */
body.pokiza-page-inner .rectangle-7 {
  --catalog-content-pad-x: clamp(16px, 3vw, 40px);
  /* Сетка карточек — на всю рабочую ширину колонки */
  --r9-width: calc(100% - 2 * var(--catalog-content-pad-x));
  /* Бордовый блок категорий — уже на 20% (80% от ширины колонки) */
  --r9-bordeaux-width: calc(var(--r9-width) * 0.8);
  /* Квадратные карточки: базовый max (мобилка) — масштаб ×1.5 от прежних 200px / 42vw */
  --catalog-card-max: min(300px, 63vw);
}

body.pokiza-page-inner .rectangle-7 .home-products-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: var(--r9-width);
  max-width: var(--r9-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  left: auto;
  top: auto;
  pointer-events: auto;
  justify-items: stretch;
  align-items: start;
}

/* Одна общая сетка — соседних полос больше нет */

body.pokiza-page-inner .rectangle-7 > .flex-row.flex-row--catalog + .home-products-strip {
  /* Наплыв карточек поверх бордового блока категорий (.rectangle-9) */
  margin-top: clamp(-64px, -5vw, -44px);
  position: relative;
  z-index: 80;
}

@media (min-width: 901px) {
  body.pokiza-page-inner .rectangle-7 > .flex-row.flex-row--catalog + .home-products-strip {
    margin-top: -64px;
  }
}

/* Каталог .home-products-strip--all: мобилка — 2 в ряд; отступы 30px; по центру */
body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  justify-content: center;
  row-gap: 30px;
  column-gap: 30px;
}

body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all .product-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: var(--catalog-card-max);
}

/* Скрываем плитку по фильтру категорий (product-catalog.js выставляет .product-tile[hidden]) */
body.pokiza-page-inner .rectangle-7 .home-products-strip .product-tile[hidden] {
  display: none !important;
}

body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all .home-product-card {
  width: 100%;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  justify-content: center;
}

body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all .home-product-card__visual {
  flex: 0 0 auto;
  width: 100%;
  height: 220px;
  min-height: 220px;
}

/* Рендер изображений через <img> (для полного каталога) */
body.pokiza-page-inner .rectangle-7 .home-products-strip .home-product-card__visual .pokiza-product-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(47, 12, 8, 0.18));
}

/* Плавный скролл к категориям — отступ, чтобы якорь не «прятался» под шапкой */
body.pokiza-page-inner .rectangle-7 .home-products-strip .product-tile[id^="product-section-"] {
  scroll-margin-top: 120px;
}

/*
 * Если полоса снова окажется внутри .flex-row (как на главной), home-adaptive центрирует :last-child.
 * На продукции с единой сеткой это обычно не срабатывает — правило оставлено на всякий случай.
 */
body.pokiza-page-inner .rectangle-7 .flex-row .home-products-strip .home-product-card:last-child {
  grid-column: auto !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* Подложка — те же переменные, что и у карточек на главной (base.css --pokiza-glass-card-*). */
body.pokiza-page-inner .rectangle-7 .home-product-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  gap: 0;
  padding: 8px;
  background: var(--pokiza-glass-card-bg) !important;
  border: 1px solid var(--pokiza-glass-card-border) !important;
  backdrop-filter: var(--pokiza-glass-card-blur) !important;
  -webkit-backdrop-filter: var(--pokiza-glass-card-blur) !important;
  border-radius: 20px;
  box-shadow: var(--pokiza-glass-card-shadow) !important;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease,
    filter 0.3s ease;
  will-change: transform;
}

body.pokiza-page-inner .rectangle-7 .home-product-card:hover {
  z-index: 60;
  transform: translateY(-6px) scale(1.05);
  background: var(--pokiza-glass-card-bg-hover) !important;
  box-shadow: var(--pokiza-glass-card-shadow-hover) !important;
}

/*
 * product-adaptive: isolation: isolate на .rectangle-7 (мобилка) иногда ломает/ослабляет backdrop-filter у детей.
 * Каталог подключает этот файл последним — сбрасываем изоляцию только здесь.
 */
body.pokiza-page-inner .rectangle-7 {
  isolation: auto;
}

body.pokiza-page-inner .rectangle-7 .home-product-card__visual {
  position: relative;
  width: 100%;
  height: 220px;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: transparent;
}

body.pokiza-page-inner .rectangle-7 .home-product-card:focus-visible {
  outline: 2px solid #6f160c;
  outline-offset: 3px;
  border-radius: 12px;
}

/* Подпись под карточкой — ВНЕ стекла, на странице */
body.pokiza-page-inner .rectangle-7 .product-tile__label,
body.pokiza-page-inner .rectangle-7 .product-tile .product-tile__label,
body.pokiza-page-inner .rectangle-7 .home-products-strip .product-tile__label {
  display: block;
  width: 100%;
  margin: 12px 0 2px;
  padding: 0 6px;
  box-sizing: border-box;
  text-align: center;
  color: #2a0806;
  font-family: var(--font-sans-brand) !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 0;
  background: transparent;
}

/*
 * Изображения в ячейке — как .milk / .istanbul на главной: снизу по центру, contain
 */
/* Прямые «плашки» с фото (без вложенной обёртки veal / navruzi / mahsus) */
body.pokiza-page-inner .rectangle-7 .home-product-card__visual > :is(
    .doctor-room,
    .premium-doctor-room,
    .amateur-room,
    .rectangle-16,
    .eastern-tales,
    .rectangle-17,
    .dairy,
    .ekstra
  ) {
  position: absolute;
  left: 50% !important;
  bottom: 0;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%);
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  max-height: 100%;
  margin: 0 !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  z-index: 2;
}

body.pokiza-page-inner .rectangle-7 .home-product-card:hover .home-product-card__visual > :is(
    .doctor-room,
    .premium-doctor-room,
    .amateur-room,
    .rectangle-16,
    .eastern-tales,
    .rectangle-17,
    .dairy,
    .ekstra,
    .rectangle-18,
    .rectangle-1b,
    .rectangle-1c,
    .rectangle-21
  ) {
  transform: translateX(-50%) translateY(-6px) scale(1.08) !important;
  filter: brightness(1.06) !important;
}

body.pokiza-page-inner .rectangle-7 .home-product-card__visual .veal,
body.pokiza-page-inner .rectangle-7 .home-product-card__visual .navruzi,
body.pokiza-page-inner .rectangle-7 .home-product-card__visual .navbaxor,
body.pokiza-page-inner .rectangle-7 .home-product-card__visual .mahsus {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  border-radius: inherit;
  z-index: 2;
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
}

/* Декоративные внутренние прямоугольники из макета (pink-box) — скрываем на карточках каталога */
body.pokiza-page-inner .rectangle-7 .home-product-card__visual :is(.rectangle-18, .rectangle-1b, .rectangle-1c, .rectangle-21) {
  display: none !important;
}

/* Первый блок: только бордовая полоса с категориями (сетка карточек — соседний блок) */
/*
 * .rectangle-9 в product.css — position:absolute; padding на обёртке его не сужает (100% от padding-box).
 * В потоке + calc — реальный отступ от краёв белого листа.
 */
body.pokiza-page-inner .flex-row.flex-row--catalog {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.pokiza-page-inner .flex-row.flex-row--catalog > .rectangle-9 {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: var(--r9-bordeaux-width) !important;
  max-width: var(--r9-bordeaux-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* product.css задаёт фиксированные отступы слева — на странице каталога выравниваем по центру блока */
body.pokiza-page-inner .flex-row.flex-row--catalog .rectangle-9 .flex-row-a {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.pokiza-page-inner .flex-row.flex-row--catalog .rectangle-9 .flex-row-a-d {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

body.pokiza-page-inner .flex-row.flex-row--catalog .rectangle-9 .rectangle-e {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

body.pokiza-page-inner .flex-row.flex-row--catalog .rectangle-9 .tender-and-juicy {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 901px) {
  body.pokiza-page-inner .rectangle-7 {
    --catalog-card-max: 300px;
  }

  /* Веб: 3 в ряд, 30px между карточками, блок сетки по центру полосы */
  body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all {
    grid-template-columns: repeat(3, minmax(0, var(--catalog-card-max)));
    justify-items: center;
    justify-content: center;
    align-items: center;
    row-gap: 30px;
    column-gap: 30px;
  }

  body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all .home-product-card {
    padding: 12px;
    gap: 0;
  }

  body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all .home-product-card__visual > :is(
      .doctor-room,
      .premium-doctor-room,
      .amateur-room,
      .rectangle-16,
      .eastern-tales,
      .rectangle-17,
      .dairy,
      .ekstra
    ) {
    max-width: 100%;
    height: 100% !important;
  }
}

/*
 * Мобилка: бордовый блок категорий — на всю ширину колонки как сетка карточек (не 80% от десктопа).
 * Иначе сетка визуально «обрезается» снизу относузкого rectangle-9; полоса акции — на всю ширину блока.
 */
@media (max-width: 900px) {
  /* Как на главной (home-adaptive): те же отступы, скругление и тень карточки */
  body.pokiza-page-inner .rectangle-7 .home-product-card {
    padding: 10px 8px 10px !important;
    border-radius: 18px !important;
    box-shadow: var(--pokiza-glass-card-shadow) !important;
  }

  body.pokiza-page-inner .rectangle-7 .home-product-card:hover {
    transform: translateY(-4px) scale(1.04) !important;
    box-shadow: var(--pokiza-glass-card-shadow-hover) !important;
  }

  body.pokiza-page-inner .rectangle-7 .home-product-card__visual {
    height: min(220px, 50vw);
    max-width: none;
  }

  body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all .home-product-card__visual {
    height: min(220px, 50vw);
    min-height: min(170px, 42vw);
  }

  body.pokiza-page-inner .flex-row.flex-row--catalog {
    overflow: visible !important;
    min-height: 0 !important;
  }

  body.pokiza-page-inner .flex-row.flex-row--catalog > .rectangle-9 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.pokiza-page-inner .rectangle-7 .home-products-strip.home-products-strip--all {
    overflow: visible !important;
  }
}

/* Плашка «Стать партнёром» — небольшой отступ до подвала (десктоп).
   Подвал теперь `position: relative` и идёт в потоке сразу после каталога,
   поэтому никаких absolute-top-сдвигов не нужно. */
@media (min-width: 901px) {
  /*
   * Заголовок «НАША ПРОДУКЦИЯ» + .group-8 + подзаголовок: на десктопе правит product.css, но
   * без внутреннего padding у .rectangle-7 визуально прилипает к верхней кромке белого листа.
   * На главной тот же стек (home.css) опирается на top: 460px у .rectangle-9 + 90px у .meat-traditions;
   * здесь добавляем мягкий зазор под скруглением, чтобы сравнивать визуал с index.
   */
  body.pokiza-page-inner .rectangle-7 {
    padding-top: 40px;
    box-sizing: border-box;
  }

  body.pokiza-page-inner .main-container > .flex-row-dde {
    top: auto !important;
  }

  body.pokiza-page-inner .rectangle-23 {
    margin-bottom: 24px !important;
  }
}