/*==============================================
  catalog/catalog.css — Natasha Libelle
  Стили страниц категорий каталога.
  Подключать ПОСЛЕ shared/base.css.
==============================================*/

/* ── ГЛОБАЛЬНЫЙ КОНТЕЙНЕР ───────────────────── */
/*
  Страницы каталога имеют максимальную ширину 1920 px.
  Класс .W определён в base.css — здесь переопределяем
  только max-width для каталожных страниц.
*/
.cat-hero,
.cat-tags,
.cat-editorial {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.cat-hero .W,
.cat-tags .W,
.cat-editorial .W {
  max-width: 1920px;
}

/* ── ХЛЕБНЫЕ КРОШКИ ─────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin-bottom: 28px;
  font-size: 12px;
  color: #777;          /* было #999 — слишком бледно на #f5f2ee */
  flex-wrap: wrap;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before {
  content: '/';
  opacity: 0.5;
  flex-shrink: 0;
}
.breadcrumb a { color: #777; transition: color .2s; }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb [aria-current="page"] { color: #222; font-weight: 600; }

/* ── HERO КАТЕГОРИИ ─────────────────────────── */
/*
  Журнальный заголовок:
  • Левая часть — текст + теги
  • Правая часть — большое фото
  На мобиле — сначала фото, потом текст
*/
.cat-hero {
  padding-top: 68px; /* компенсация фиксированного хедера (min-height 68px) */
  background: var(--c-warm);
  overflow: hidden;
}

.cat-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

/* Левая текстовая часть */
.cat-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 80px var(--w-pad) 72px;
  background: var(--c-warm);
}

.cat-hero__eyebrow {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}

.cat-hero__text > h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 4.5vw, 72px);
  font-weight: 700; line-height: 1.0;
  letter-spacing: -.03em; color: #111;
  margin-bottom: 28px;
}

/* Текст-лид под заголовком — без класса на <p>, стилизуем по контексту */
.cat-hero__text > p {
  font-size: clamp(14px, 1.0vw, 16px);
  font-family: 'Inter', sans-serif;
  color: #555;
  line-height: 1.85;
  max-width: 520px;
  margin-bottom: 20px;
}

.cat-hero__text > p:last-of-type {
  font-size: 12px; color: #666;  /* было #aaa — не читается на #f5f2ee */
  letter-spacing: .04em;
  /* Тонкий разделитель сверху для визуального отрыва от lead */
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.1);
  margin-top: auto;  /* прижимаем к низу flex-колонки */
}

/* Правая часть — фото */
.cat-hero__photo {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
}

.cat-hero__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}

.cat-hero:hover .cat-hero__photo img {
  transform: scale(1.03);
}

/* Декоративная плашка поверх фото */
.cat-hero__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 64px 32px 28px;         /* шире градиент — надёжнее читабельность */
  background: linear-gradient(to top,
    rgba(0,0,0,.72) 0%,            /* было .55 — слабо на светлых фото */
    rgba(0,0,0,.20) 60%,
    transparent 100%);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff;                     /* было rgba(.75) — теперь чисто белый */
}

@media (max-width: 900px) {
  .cat-hero__layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cat-hero__photo {
    order: -1;
    min-height: 360px;
    max-height: 50svh;
  }
  .cat-hero__photo img { position: relative; inset: auto; width: 100%; height: 100%; min-height: 360px; }
  .cat-hero__text {
    padding: 48px var(--w-pad) 48px;
    justify-content: flex-start;
  }
  .cat-hero__text > p:first-of-type { max-width: 100%; }
}
@media (max-width: 600px) {
  .cat-hero__photo { min-height: 280px; max-height: 44svh; }
  .cat-hero__photo img { min-height: 280px; }
  .cat-hero__text { padding: 36px var(--w-pad) 36px; }
  .cat-hero__text > h1 { font-size: 36px; }
}
/* Landscape-телефон: возвращаем двухколоночный layout, фото читаемо */
@media (max-height: 500px) and (orientation: landscape) {
  .cat-hero { padding-top: 52px; }
  .cat-hero__layout {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    height: calc(100svh - 52px);
  }
  .cat-hero__photo {
    order: 0;
    min-height: 0;
    max-height: none;
  }
  .cat-hero__photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    min-height: 0;
    object-position: center 30%;  /* украшение обычно в верхней трети — поднимаем */
  }
  .cat-hero__text {
    padding: 24px var(--w-pad) 24px;
    justify-content: center;
    overflow-y: auto;
  }
  .cat-hero__text > p:last-of-type { display: none; } /* убираем мелкий технический текст */
}

/* ── ССЫЛКА НА ЭНЦИКЛОПЕДИЮ В ЛИДЕ ─────────── */
/* Используется в теговых страницах: «Подробнее о камне →» */
.tag-stone-link {
  display: inline-block;
  align-self: flex-start;
  margin-top: 12px;
  margin-bottom: 32px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent);
  border-bottom: 1px solid rgba(107,63,143,.3);
  padding-bottom: 1px;
  transition: border-color .2s, color .2s;
}
.tag-stone-link:hover {
  border-color: var(--c-accent);
}

/* ── EDITORIAL STRIP (образы бренда) ─────────── */
/*
  Горизонтальная полоса с 3 узкими фото + цитатой.
  Создаёт разрыв между тегами и сеткой товаров.
*/
.cat-editorial {
  background: #f8f2f7;
  overflow: hidden;
}

.cat-editorial__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  min-height: 360px;
}

.cat-editorial__img {
  position: relative;
  overflow: hidden;
  background: #111;
}
.cat-editorial__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .4s, transform .6s;
}
.cat-editorial__img:hover img {
  opacity: 1;
  transform: scale(1.04);
}

.cat-editorial__quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 56px;
  background: #f8f2f7;
}

.cat-editorial__quote > p {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 300;
  color: #1c1220;
  line-height: 1.5;
  margin-bottom: 28px;
}
.cat-editorial__quote > p::before { content: '«'; }
.cat-editorial__quote > p::after  { content: '»'; }

.cat-editorial__source {
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-accent);
}

@media (max-width: 900px) {
  .cat-editorial__inner {
    grid-template-columns: 1fr 1fr;
  }
  .cat-editorial__quote {
    grid-column: span 2;
    padding: 48px var(--w-pad);
  }
  .cat-editorial__img { min-height: 260px; }
  .cat-editorial__img img { position: relative; inset: auto; width: 100%; height: 260px; }
}
@media (max-width: 600px) {
  .cat-editorial__inner {
    grid-template-columns: 1fr;
  }
  .cat-editorial__img:nth-child(3) { display: none; } /* третье фото скрываем */
  .cat-editorial__quote { grid-column: span 1; padding: 40px var(--w-pad); }
  .cat-editorial__img { min-height: 220px; }
  .cat-editorial__img img { height: 220px; }
}

/* ── ТЕГИ-ФИЛЬТРЫ ───────────────────────────── */
.cat-tags {
  padding: 18px 0;
  background: #fff;
  border-bottom: 1px solid #ede9e4;
  position: sticky; top: 68px; z-index: 100; /* хедер min-height 68px */
}
@media (max-width: 1100px) { .cat-tags { top: 56px; } } /* брейкпоинт совпадает с переключением хедера */

/*
  Обёртка с маской: fade справа подсказывает,
  что список можно прокрутить (без JS).
*/
.cat-tags__wrap {
  position: relative;
  overflow: hidden;   /* скрывает fade за пределами */
}
.cat-tags__wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, #fff);
  pointer-events: none;
}

.cat-tags__inner {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
  padding-right: 48px;  /* место под fade-маску */
  /* Плавная инерция на iOS; на десктопе — drag-to-scroll (JS в catalog.js) */
  -webkit-overflow-scrolling: touch;
  /* Курсор-«ладошка» намекает, что ленту можно тащить мышкой.
     На тач-устройствах указатель не отображается — подсказка не мешает. */
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
}
.cat-tags__inner::-webkit-scrollbar { display: none; }
.cat-tags__inner.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;   /* во время перетаскивания — без «плавности», иначе рывки */
}
.cat-tags__inner.is-dragging .cat-tag {
  /* Пока тащим — блокируем клики по ссылкам,
     чтобы отпускание кнопки не превращалось в переход. */
  pointer-events: none;
}

.cat-tag {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 16px;
  font-size: 12px; font-weight: 500;
  letter-spacing: .06em;
  color: #555;
  background: #f5f2ee;
  border: 1px solid transparent;
  border-radius: 17px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.cat-tag:hover {
  background: #ede8f3;
  color: var(--c-accent);
  border-color: rgba(107,63,143,.2);
}
.cat-tag.is-active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}

/* ── ТУЛБАР: ФИЛЬТРЫ + СОРТИРОВКА ──────────── */
.cat-toolbar {
  padding: 22px 0 18px;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid #e8e3de;
}
.cat-toolbar__filters {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/*
  .cat-filter-btn — визуальная кнопка.
  Когда внутри есть <select>, он поверх неё (opacity:0, position:absolute),
  нативный дропдаун браузера — без кастомного JS.
*/
.cat-filter-btn {
  position: relative;           /* контекст для select-overlay */
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  font-size: 12px; font-weight: 500; letter-spacing: .03em;
  color: #444;
  background: #fff; border: 1px solid #d8d3cd;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  white-space: nowrap;
  overflow: hidden;            /* select не вылезает */
}
.cat-filter-btn:hover { border-color: #aaa; color: #222; }
.cat-filter-btn.is-active { border-color: var(--c-accent); color: var(--c-accent); background: #faf6ff; }
.cat-filter-btn svg { opacity: .45; flex-shrink: 0; }

/* Шеврон вниз — показываем только у кнопок с select */
.cat-filter-btn--select::after {
  content: '';
  display: block; flex-shrink: 0;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .5;
  margin-left: 4px;
}

/* Select поверх кнопки: невидимый, но кликабельный */
.cat-filter-btn select {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 14px;   /* читаемый размер в нативном дропдауне */
  width: 100%; height: 100%;
}

/* Разделитель между группой фильтров и сортировкой */
.cat-toolbar__sep {
  width: 1px; height: 20px;
  background: #e0dbd6;
  margin: 0 4px;
  flex-shrink: 0;
}

.cat-sort {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #666;
}
.cat-sort__label { color: #999; white-space: nowrap; }
.cat-sort select {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #333; font-weight: 500;
  background: none; border: none;
  cursor: pointer; outline: none;
  padding: 2px 0;
  -webkit-appearance: auto;  /* нативная стрелка браузера */
}

/* Счётчик изделий — правее, тусклее */
.cat-count {
  font-size: 12px; color: #888;  /* было #999 — слабо на #fff */
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cat-toolbar { padding: 14px 0 12px; gap: 8px; }
  .cat-count { margin-left: 0; order: -1; }
  .cat-toolbar__sep { display: none; }
}

/* ── ЦЕНОВОЙ СЛАЙДЕР ────────────────────────── */
/*
  .cat-price-btn  — кнопка-триггер (как у других фильтров)
  .cat-price-drop — выпадающая панель со слайдером
  .cat-price-range — двойной range (два <input type=range>)
*/
.cat-price-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  font-size: 12px; font-weight: 500; letter-spacing: .03em;
  color: #444;
  background: #fff; border: 1px solid #d8d3cd;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  white-space: nowrap;
  user-select: none;
}
.cat-price-btn:hover { border-color: #aaa; color: #222; }
.cat-price-btn.is-active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: #faf6ff;
}
.cat-price-btn svg { opacity: .45; flex-shrink: 0; }
.cat-price-btn::after {
  content: '';
  display: block; flex-shrink: 0;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .5;
  margin-left: 4px;
  transition: transform .2s;
}
.cat-price-btn.is-open::after { transform: rotate(180deg); }

/* Панель-дропдаун */
.cat-price-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: #fff;
  border: 1px solid #d8d3cd;
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
  padding: 20px 18px 16px;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.cat-price-drop.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* Строка «от … до …» */
.cat-price-vals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 12px;
  color: #333;
  font-weight: 500;
}
.cat-price-vals span { color: #999; font-weight: 400; }

/* Трек двойного слайдера */
.cat-price-range {
  position: relative;
  height: 20px;
  margin-bottom: 12px;
}
.cat-price-track {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 0; right: 0;
  height: 3px;
  background: #e0dbd6;
  border-radius: 2px;
  pointer-events: none;
}
.cat-price-fill {
  position: absolute;
  top: 0; height: 100%;
  background: var(--c-accent);
  border-radius: 2px;
}
.cat-price-range input[type="range"] {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 0; width: 100%;
  height: 20px;
  margin: 0; padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  outline: none;
}
/* Большой прозрачный трек — не перекрывает .cat-price-track */
.cat-price-range input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 20px;
}
.cat-price-range input[type="range"]::-moz-range-track {
  background: transparent;
  height: 3px;
}
/* Ползунок */
.cat-price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  pointer-events: all;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cat-price-range input[type="range"]::-webkit-slider-thumb:hover,
.cat-price-range input[type="range"]:active::-webkit-slider-thumb {
  border-color: #52307a;
  box-shadow: 0 0 0 4px rgba(107,63,143,.15);
}
.cat-price-range input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  pointer-events: all;
  cursor: pointer;
}

/* Кнопка «Сбросить» */
.cat-price-reset {
  display: block;
  width: 100%;
  font-size: 11px; font-weight: 500;
  color: #999;
  background: none; border: none;
  text-align: center;
  cursor: pointer;
  padding: 4px 0 0;
  letter-spacing: .04em;
  transition: color .15s;
}
.cat-price-reset:hover { color: var(--c-accent); }

/* На мобиле — дропдаун растягивается на всю ширину viewport */
@media (max-width: 600px) {
  .cat-price-drop {
    position: fixed;
    left: 16px; right: 16px;
    width: auto;
    top: auto;
    bottom: 72px; /* над app-nav */
    box-shadow: 0 -4px 28px rgba(0,0,0,.14);
  }
}

/* ── ЧЕКБОКС-ФИЛЬТР ────────────────────────── */
/*
  .cat-cb-group  — обёртка строки чекбоксов (внутри .cat-toolbar__filters)
  .cat-cb-item   — один чекбокс + лейбл
  Десктоп: inline flex, перенос не нужен.
  Мобиле (≤600px): width:100%; order:10 → встаёт вторым рядом.
*/

.cat-cb-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  /* Нет margin-left — соседствует с другими фильтрами */
}

/* Подпись «Камень:» перед чекбоксами */
.cat-cb-group__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #999;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: 2px;
  user-select: none;
}

/* Обёртка одного чекбокса */
.cat-cb-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px 0 8px;
  font-size: 11px; font-weight: 500;
  color: #555;
  background: #f7f4f0;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color .18s, color .18s, background .18s;
}
.cat-cb-item:hover {
  border-color: #ccc;
  color: #222;
}

/* Сам <input type=checkbox> скрываем */
.cat-cb-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}

/* Кастомный квадратик */
.cat-cb-item__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  border: 1.5px solid #bbb;
  border-radius: 2px;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.cat-cb-item__box svg {
  display: none;
  width: 9px; height: 9px;
}

/* Активное состояние: чекбокс отмечен */
.cat-cb-item.is-checked {
  background: #faf6ff;
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.cat-cb-item.is-checked .cat-cb-item__box {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.cat-cb-item.is-checked .cat-cb-item__box svg {
  display: block;
}

/* Кнопка «Сбросить все фильтры» — правее блока фильтров */
.cat-reset-all {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: #999;
  background: none;
  border: 1px solid #e0dbd6;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.cat-reset-all:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.cat-reset-all svg { opacity: .6; flex-shrink: 0; }
.cat-reset-all:hover svg { opacity: 1; }

/* Кнопка «Сбросить камень» — появляется если хоть один выбран */
.cat-cb-reset {
  display: none; /* показываем через JS: .is-active → display:inline-flex */
  align-items: center;
  height: 28px;
  padding: 0 8px;
  font-size: 11px; font-weight: 500;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: .03em;
  transition: color .15s;
}
.cat-cb-reset.is-active { display: inline-flex; }
.cat-cb-reset:hover { color: var(--c-accent); }

/* ═══ МОБИЛЕ (≤600px) ═══
   Чекбокс-строка занимает весь ряд и встаёт второй строкой.
   order:10 гарантирует, что другие фильтры (order по умолч. 0) будут выше.
*/
@media (max-width: 600px) {
  .cat-cb-group {
    width: 100%;
    order: 10;
    /* Небольшой отступ сверху чтобы отделить от первой строки фильтров */
    padding-top: 6px;
    border-top: 1px solid #ece8e2;
    margin-top: 2px;
  }
}

/* ── ЖУРНАЛЬНАЯ СЕТКА ───────────────────────── */
/*
  Паттерн (группы по 6 карточек):
  Группа A: [BIG — 2 кол] [small] [small] (3 элем)
  Группа B: [small] [small] [BIG — 2 кол] (3 элем)
  Итого: чёткое журнальное чередование без nth-child проблем.
  Используем CSS-классы: .pcard--big (занимает 2 колонки).
*/
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* border-top убран: тулбар выше уже даёт border-bottom того же цвета */
  border-left: 1px solid #e8e3de;
}

/* ── КАРТОЧКА ТОВАРА ────────────────────────── */
.pcard {
  background: #fff;
  display: flex; flex-direction: column;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: background .25s;
  border-right: 1px solid #e8e3de;
  border-bottom: 1px solid #e8e3de;
}
.pcard:not(.pcard--editorial):not(.pcard--cta):hover { background: #fdfcfb; }
.pcard--editorial:hover { background: #f0e8ef; }

/* Ссылка-обёртка картинки */
.pcard__img-link {
  display: block; flex-shrink: 0;
  text-decoration: none;
}

/* Изображение */
.pcard__img {
  position: relative; overflow: hidden;
  /* Белая подложка: фото с белым фоном не создают «поля» бежевого
     цвета, если вертикальный кадр не заполняет квадрат полностью. */
  background: #fff;
  flex-shrink: 0;
  padding-bottom: 100%; /* квадрат по умолчанию */ /* 4:5 — больше фото, меньше воздуха */
}
.pcard__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* contain: показываем фото целиком, без обрезки.
     Свободные поля заливаются белой подложкой .pcard__img (см. выше). */
  object-fit: contain;
  object-position: var(--obj-pos, center center); /* per-card override: style="--obj-pos:…" */
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.pcard:hover .pcard__img img { transform: scale(1.04); }

/* Кнопка «В избранное» — вынесена из ссылки, позиционируется относительно .pcard */
.pcard__wish {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;          /* ≥40×40 — минимум для тапа */
  background: rgba(255,255,255,.85);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  opacity: 0;
  transition: opacity .2s, background .2s;
}
.pcard:hover .pcard__wish { opacity: 1; }
/* На touch-устройствах (нет точного hover) — сердечко всегда видно */
@media (hover: none) {
  .pcard__wish { opacity: 1; }
}
.pcard__wish:hover { background: #fff; }
.pcard__wish svg { color: #888; transition: color .2s; }
.pcard__wish.is-wish svg { color: #c0457a; }

/* Бейдж */
.pcard__badge {
  position: absolute; top: 14px; left: 14px;
  padding: 4px 10px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--c-accent); color: #fff;
  z-index: 2;
}
.pcard__badge--new  { background: var(--c-accent); }
.pcard__badge--sale { background: #b84040; }

/* Мета */
.pcard__meta {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column;
  flex: 1;
}
.pcard__col {
  font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 6px;
}
/* H3 без класса внутри карточки (.pcard__meta > h3) */
.pcard__meta > h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 400;
  line-height: 1.25; letter-spacing: 0;
  color: #1c1220; margin-bottom: 6px;
  transition: color .2s;
}
.pcard:hover .pcard__meta > h3 { color: var(--c-accent); }

.pcard__name {
  font-size: 15px; font-weight: 600; color: #111;
  line-height: 1.3; margin-bottom: 6px;
  transition: color .2s;
  text-decoration: none;
  display: block;
}
.pcard:hover .pcard__name { color: var(--c-accent); }
.pcard__name:hover { color: var(--c-accent); }
.pcard__meta > p {
  font-size: 13px; color: #666; line-height: 1.65;
  margin-bottom: 14px; flex: 1;
  display: none;
}
.pcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
}
.pcard__price { font-size: 15px; font-weight: 700; color: #111; }
.pcard__price-old {
  font-size: 12px; font-weight: 400; color: #aaa;
  text-decoration: line-through; margin-right: 6px;
}

/* ── БОЛЬШАЯ КАРТОЧКА ────────────────────────── */
.pcard--big {
  grid-column: span 2;
}
.pcard--big .pcard__img {
  padding-bottom: 64%; /* горизонтальный формат */
}
.pcard--big .pcard__img img {
  object-fit: contain;   /* см. базовое правило .pcard__img img */
  object-position: var(--obj-pos, center center);
}

/* ── Узкая карточка рядом с BIG: grid-stretch — фото заполняет всю высоту строки ── */
/* Применяем только к .pcard--narrow-hero (узкая рядом с big) */
.cat-grid .pcard--narrow-hero {
  display: grid;
  grid-template-rows: 1fr auto;
  align-self: stretch;   /* не выходит за высоту строки */
}
.cat-grid .pcard--narrow-hero .pcard__img-link {
  display: block;
  height: 100%;
  overflow: hidden;      /* обрезаем если фото выше BIG */
}
.cat-grid .pcard--narrow-hero .pcard__img {
  padding-bottom: 0;
  height: 100%;
  max-height: 100%;      /* не вылезает за высоту строки */
}
.cat-grid .pcard--narrow-hero .pcard__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* см. базовое правило .pcard__img img */
  object-position: var(--obj-pos, center center);
}
/* Три одинаковые плитки: квадратный aspect ratio */
.cat-grid .pcard:not(.pcard--big):not(.pcard--cta):not(.pcard--editorial):not(.pcard--narrow-hero) .pcard__img {
  padding-bottom: 100%;
}
.pcard--big .pcard__meta {
  padding: 24px 32px 30px;
}
.pcard--big .pcard__name {
  font-size: 22px;
  margin-bottom: 10px;
}
.pcard--big .pcard__meta > p { display: block; }
/* Анонс-текст в узкой карточке рядом с big */
.pcard--narrow-hero .pcard__meta > p { display: block; }
.pcard--big .pcard__price { font-size: 18px; }

/* ── CTA-ПЛИТКА ──────────────────────────────── */
.pcard--cta {
  grid-column: span 3;          /* всегда на всю ширину сетки */
  background: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
  text-decoration: none;
  transition: background .25s;
  border-color: transparent;
}
.pcard--cta:hover { background: #52307a; }
.pcard--cta__body {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding: 40px 32px;
  text-align: center;
}
.pcard--cta__text {
  font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: #fff;
}
.pcard--cta svg { color: rgba(255,255,255,.5); }

/* ── РЕДАКЦИОННАЯ/SEO ПЛИТКА ─────────────────── */
/*
  Занимает 1 колонку — закрывает «дырку» между группой B (BIG справа)
  и группой A (BIG слева). Светлый фон #f8f2f7, тёмные тексты.
*/
.pcard--editorial {
  background: #f8f2f7;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 28px 24px 30px;
  color: #1c1220;
  border-color: rgba(107,63,143,.1);
}
.pcard--editorial__label {
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 20px;
}
.pcard--editorial__quote {
  font-family: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  font-size: 24px; font-weight: 300;
  line-height: 1.35;
  color: rgba(28,18,32,.75);
  margin-bottom: 20px;
  flex: 1;
}
.pcard--editorial__body {
  font-size: 12px; line-height: 1.75;
  color: rgba(28,18,32,.5);
}
/* Редакционная плитка на всю ширину (разделитель между блоками) */
.pcard--editorial-wide {
  grid-column: span 3;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  padding: 36px 48px;
}
.pcard--editorial-wide .pcard--editorial__label {
  margin-bottom: 0;
  flex-shrink: 0;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  align-self: center;
}
.pcard--editorial-wide .pcard--editorial__quote {
  font-size: 20px;
  margin-bottom: 0;
  flex: 0 0 340px;
  align-self: center;
}
.pcard--editorial-wide .pcard--editorial__body {
  flex: 1;
  align-self: center;
}
/* на мобильных скрываем — сетка однколоночная, пустоты нет */
@media (max-width: 600px) {
  .pcard--editorial { display: none; }
}

/* ── КНОПКА «ПОКАЗАТЬ ЕЩЁ» ──────────────────── */
/*
  Простой <a href="?page=N"> — переход на следующую страницу.
  AJAX не нужен: товаров мало, SEO важнее.
*/
.cat-more {
  padding: 56px 0 48px;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.cat-more > p {
  font-size: 12px;
  color: #888;           /* было #bbb — еле видно на #fff */
  letter-spacing: .04em;
}
/* btn--ghost-k глобально #111 → на светлом фоне переопределяем фиолетовым */
.cat-more .btn--ghost-k {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.cat-more .btn--ghost-k:hover {
  background: var(--c-accent);
  color: #fff;
}

/* ── АДАПТИВ СЕТКИ ───────────────────────────── */
@media (max-width: 900px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Большая карточка занимает 2 колонки */
  .pcard--big {
    grid-column: span 2;
  }
  .pcard--big .pcard__img { padding-bottom: 56%; }
  .pcard--cta { grid-column: span 2; min-height: 140px; }
  .pcard--editorial-wide { grid-column: span 2; }
}

@media (max-width: 600px) {
  .cat-grid {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .pcard--big,
  .pcard--cta,
  .pcard--editorial-wide {
    grid-column: span 1;
  }
  /* Сброс grid-stretch для узкой на мобиле — она идёт в одну колонку */
  .cat-grid .pcard--narrow-hero {
    display: flex;
    flex-direction: column;
    grid-template-rows: unset;
  }
  .cat-grid .pcard--narrow-hero .pcard__img-link { height: auto; }
  .cat-grid .pcard--narrow-hero .pcard__img { padding-bottom: 80%; height: auto; }
  /* wide editorial → вертикальный стек */
  .pcard--editorial-wide {
    flex-direction: column;
    padding: 28px 24px 30px;
  }
  .pcard--editorial-wide .pcard--editorial__label {
    writing-mode: horizontal-tb;
    transform: none;
    margin-bottom: 16px;
  }
  .pcard--editorial-wide .pcard--editorial__quote { flex: none; margin-bottom: 14px; }
  .pcard__img { padding-bottom: 80%; }
  .pcard--big .pcard__img { padding-bottom: 80%; }
  .pcard--big .pcard__meta { padding: 16px 18px 20px; }
  .pcard--big .pcard__name { font-size: 17px; }
  .pcard--big .pcard__meta > p { display: none; }
  .pcard--big .pcard__price { font-size: 15px; }
  .pcard__meta { padding: 14px 16px 18px; }
  .pcard__wish { opacity: 1; }
  .pcard--cta { min-height: 110px; }
}


/* ══════════════════════════════════════════════
   SEO-ТЕКСТ  .cat-seo
   Располагается после сетки товаров и cat-more.
   Светлый фон #faf9f7, двухколоночная сетка:
   текст (2/3) + плашки с фактами (1/3).
══════════════════════════════════════════════ */
.cat-seo {
  background: #f8f2f7;
  border-top: 1px solid rgba(107,63,143,.1);
  padding: 64px 0 72px;
}

.cat-seo__inner {
  max-width: 800px;
}

.cat-seo__title {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 300;
  color: #1c1220;
  margin: 0 0 20px;
  letter-spacing: 0;
  line-height: 1.1;
}

.cat-seo__lead {
  font-size: 16px;
  color: #444;
  line-height: 1.8;
  margin: 0 0 16px;
}

.cat-seo__main > p:not(.cat-seo__lead) {
  font-size: 15px;
  color: #777;
  line-height: 1.8;
  margin: 0 0 14px;
}
.cat-seo__main > p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .cat-seo { padding: 48px 0 56px; }
}