/* ---------- Первый экран каталога ----------
   Не копия главной. Там слои едут от прокрутки (js/scroll.js подключён только к index.html), поэтому здесь
   глубину даёт неподвижная сцена: арт дворца, филигранная роза поверх него и одна медленно дрейфующая дымка.
   Низ экрана растворяется в цвете страницы: владелец отдельно просил, чтобы картинка нигде не обрывалась резко. */
.chero{position:relative;overflow:clip;isolation:isolate;display:grid;align-content:end;min-height:clamp(430px,64svh,620px);padding:calc(var(--header-h) + 9vh) 0 clamp(28px,5vh,56px);background:var(--ink-950)}
/* Кадр держится за верх арта: там светящаяся печать и колоннада, а не пустая дорожка под ногами */
.chero__art{position:absolute;inset:0;background:url(../../img/palace.webp) 50% 22%/cover no-repeat}
/* Две заливки сразу: вертикальная гасит верх под шапкой и низ под текстом, радиальная добавляет фиолетовый воздух */
.chero__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,13,.92) 0,rgba(7,6,13,.4) 30%,rgba(7,6,13,.66) 62%,var(--ink-950) 100%),radial-gradient(74% 54% at 64% 26%,rgba(109,91,208,.22),transparent 72%)}

/* Роза ветров: филигрань из тонких линий в нижнем углу — её наполовину съедает растворение низа,
   и она читается как тиснение в тумане, а не как наклейка поверх арта. Оборот за четыре минуты. */
/* Смещение в пикселях, а не в процентах: на мониторе 21:9 отступ в процентах уносит розу за край экрана */
.chero__rose{position:absolute;right:-70px;bottom:-120px;z-index:1;width:min(76vw,440px);color:var(--gold-400);opacity:.2;animation:roseturn 240s linear infinite}
.chero__rose svg{width:100%;height:auto}
@keyframes roseturn{to{rotate:360deg}}

.chero__fog{position:absolute;left:-8%;right:-8%;bottom:-2%;z-index:1;height:min(56%,340px);background:url(../../img/fog-3.webp) 50% 100%/100% 100% no-repeat;opacity:.38;animation:cdrift 84s ease-in-out infinite alternate}
@keyframes cdrift{from{translate:-3% 0}to{translate:3% 0}}
.chero__edge{position:absolute;left:0;right:0;bottom:0;z-index:1;height:clamp(110px,18vh,200px);background:linear-gradient(180deg,rgba(7,6,13,0),var(--ink-950) 88%)}

/* Между первым экраном и витриной не нужен полный отступ секции: иначе после растворения арта
   идёт полоса пустой черноты, и кажется, что картинку обрезали. */
.chero + .starfield > .section:first-child{padding-top:clamp(44px,6vw,80px)}
.chero__copy{position:relative;z-index:2;display:grid;justify-items:start;gap:16px}
.chero__title{font-size:var(--fs-h1);max-width:14ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.7)}
.chero__title em{font-style:normal;color:var(--fog-300)}
.chero__sub{max-width:50ch;color:#e4dcef;text-shadow:0 1px 16px rgba(0,0,0,.75)}
.chero__facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:4px 0 0;padding:0;list-style:none;font-size:.875rem;color:var(--fog-300)}
.chero__facts li{display:flex;align-items:baseline;gap:8px}
.chero__facts b{font-weight:600;color:var(--gold-200)}
/* Монитор 21:9: окно низкое, верх арта уходит за кадр — поднимаем кадр и сжимаем отступы (как на главной) */
@media(min-aspect-ratio:2/1){.chero{min-height:clamp(380px,76svh,560px);padding-top:calc(var(--header-h) + 7vh)}.chero__art{background-position:50% 16%}}

/* ---------- Витрина: фильтр, поиск, сортировка ----------
   Панель не липкая: на телефоне она занимает три ряда, и закреплённая полоса съела бы пол-экрана каталога. */
.tools{display:grid;gap:16px;margin-bottom:clamp(22px,4vw,34px);padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.tools__filters{display:flex;flex-wrap:wrap;gap:8px}
.fpill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--fog-300);font-size:.875rem;white-space:nowrap;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.fpill:hover{color:var(--text);border-color:var(--gold-400)}
.fpill__n{font-size:.75rem;opacity:.65;font-variant-numeric:tabular-nums}
.fpill[aria-pressed="true"]{border-color:var(--gold-200);background:linear-gradient(180deg,var(--gold-200),var(--gold-400));color:#1a1407;font-weight:600}
.fpill[aria-pressed="true"] .fpill__n{opacity:.7}
/* Раздел, в котором сейчас ничего не найдено, не прячется: посетитель должен видеть всю карту лавки */
.fpill[data-none="1"]{opacity:.5}

.tools__row{display:grid;gap:12px}
.tools__search{position:relative}
.tools__search .input{padding-right:50px}
.tools__search .input::-webkit-search-cancel-button{display:none} /* свой крестик уже есть, второй не нужен */
.tools__clear{position:absolute;right:2px;bottom:2px;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--fog-300);font-size:1rem;cursor:pointer}
.tools__clear:hover{color:var(--text)}
/* Стрелка нарисована фоном: системная стрелка select на тёмной панели выглядит чужой */
.tools__sort select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23aab0c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
.tools__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.tools__count{font-size:.875rem;color:var(--fog-300)}
.tools__count b{font-weight:600;color:var(--gold-200)}
.tools__reset{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--fog-300);font-size:.8125rem;cursor:pointer}
.tools__reset:hover{border-color:var(--gold-400);color:var(--text)}
@media(min-width:720px){.tools__row{grid-template-columns:1.6fr 1fr}}

/* ---------- Сетка товаров ----------
   Позиционирование сетке НЕ задаём: js/focus.js собирает ряды по offsetTop относительно .section,
   а у спрятанных карточек offsetTop равен нулю — так они не попадают в ряд с видимыми. */
.cat-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
/* Выравнивание кнопок «В корзину» в ряду делает общее правило .pcard в css/components.css. */
.cat-empty{display:grid;justify-items:start;gap:14px;padding:clamp(24px,5vw,40px)}
.cat-empty h3{font-size:var(--fs-h3)}
.cat-empty p{max-width:46ch;color:var(--fog-300)}

/* ---------- Закрывающая полоса ----------
   Примыкает к витрине без своего верхнего отступа: нижнего отступа секции с товарами уже достаточно. */
.cat-tail{padding-top:0}
.cat-foot{display:grid;gap:20px;padding:clamp(24px,4vw,36px);background:linear-gradient(120deg,color-mix(in srgb,var(--indigo-700) 48%,var(--ink-900)),var(--ink-900))}
.cat-foot h3{font-size:var(--fs-h3)}
.cat-foot p{max-width:56ch;color:var(--fog-300)}
.cat-foot__cta{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:860px){.cat-foot{grid-template-columns:1.5fr auto;align-items:center;gap:32px}}