/* catalog.css — раздел «Магазин»: лента разделов .shopbar (в поиске — с числом совпадений), плитки категорий
   .shtiles, «Рекомендуем», сетка товаров (.grid/.card), фильтры (.filters, .fgroup, .fopt, .fchip, «Ещё
   параметры»), компактная панель (.toolbar: .fbtn · .sortbtn + #sortmenu · .count), чипсы, пустой результат,
   страница поиска (.sqform) и шапка каталога. Владелец: команда «каталог». Контракт — docs/BLOCK3.md §4–7. */

/* ============ лента разделов магазина ============
   Раньше жила в шапке сайта; теперь шапка — четыре раздела, а категории — навигация внутри магазина.
   Правила свои, со .shopbar: layout.css вправе убрать общие .catbar/.catrow вместе с лентой шапки */
.catbar.shopbar{position:relative;background:var(--bg);border-top:0;border-bottom:1px solid var(--line)}
.catbar.shopbar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:36px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg));opacity:0;transition:opacity .2s}
.catbar.shopbar.scrollable::after{opacity:1}
.shopbar .catrow{display:flex;gap:4px;align-items:stretch;height:50px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.shopbar .catrow::-webkit-scrollbar{display:none}
/* вес у активного и обычного пункта одинаковый — иначе при смене категории ряд дёргается по ширине */
.shopbar .catrow a{display:flex;align-items:center;position:relative;white-space:nowrap;padding:0 14px;
  border-radius:var(--r) var(--r) 0 0;font-weight:600;color:var(--ink2);font-size:14.5px;
  transition:color .14s,background-color .14s,transform .14s}
.shopbar .catrow a:hover{background:var(--brand-soft);color:var(--brand)}
.shopbar .catrow a.on{color:var(--brand)}
/* активный пункт: синий текст + оранжевая черта 3px снизу, левый конец заострён (бриф §5) */
.shopbar .catrow a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--accent);
  clip-path:polygon(6px 0,100% 0,100% 100%,0 100%)}
.shopbar .catrow a:active{background:var(--brand-soft);transform:scale(.97)}
.shopbar .catrow a:focus-visible{outline-offset:-2px}
/* поиск: число совпадений у пункта; ноль — приглушён, но кликабелен (открывает пустую выдачу с действиями) */
.shopbar .catrow a .rn{margin-left:6px;font-size:12px;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums}
.shopbar .catrow a.on .rn{color:var(--brand)}
.shopbar .catrow a.zero{color:var(--ink3);font-weight:500}
/* шапка раздела сразу под лентой — поменьше воздуха сверху */
section.shop{padding-top:30px}
/* надзаголовок-ссылка «Магазин» над названием категории: путь назад в раздел */
a.kicker:hover{text-decoration:underline;text-underline-offset:3px}
a.kicker:active{opacity:.7}
/* надзаголовок-ссылка внутри .sec-head: общее правило base.css «.sec-head a» перекрасило бы его
   в синий и увеличило до 14.5px — возвращаем вид надзаголовка */
.sec-head a.kicker,.sec-head a.kicker:hover{display:flex;color:var(--accent-d);font-size:11px;white-space:normal;min-height:0}

/* ============ плитки категорий на лендинге ============
   Горизонтальная плитка: название, число товаров и «от N ₾» слева, настоящее фото справа.
   На телефоне — лента со свайпом (ниже в @media) */
.shtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:12px;margin:0 0 40px}
.shtile{display:flex;align-items:center;gap:12px;min-height:92px;padding:12px 12px 12px 16px;border:1px solid var(--line);
  border-radius:var(--rl);background:#fff;min-width:0;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.shtile:hover{border-color:var(--brand);box-shadow:var(--sh);transform:translateY(-2px)}
.shtile:active{transform:scale(.98);box-shadow:none}
.shtile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.shtile .tt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.shtile b{font-size:15.5px;font-weight:700;letter-spacing:-.3px;line-height:1.25;color:var(--ink);transition:color .16s;overflow-wrap:anywhere}
.shtile:hover b{color:var(--brand)}
.shtile i{font-style:normal;font-size:12.5px;color:var(--ink2)}
.shtile i.tfrom{color:var(--brand);font-weight:600;font-variant-numeric:tabular-nums}
.shtile .tp{width:68px;height:68px;flex:none;border-radius:12px;background:#fff;position:relative;overflow:hidden}
.shtile .tp picture{display:contents}
.shtile .tp img{position:absolute;inset:4px;margin:auto;width:auto;height:auto;max-width:calc(100% - 8px);max-height:calc(100% - 8px);object-fit:contain}
/* «Рекомендуем» и «Все товары» — обычные шапки секций со штрихом */
.shfeat{margin:0 0 44px}
.shland .shall{margin-bottom:20px}

/* ============ страница поиска ============ */
.sqform{display:flex;gap:10px;align-items:stretch;max-width:640px;margin:0 0 22px}
.sqbox{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 14px;
  border:1.5px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .15s}
.sqbox:focus-within{border-color:var(--brand)}
.sqbox svg{width:20px;height:20px;flex:none;color:var(--ink3)}
.sqbox input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink)}
/* свой крестик вместо системного: одинаковый во всех браузерах, фокус остаётся в поле */
.sqbox input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sqbox .sqx{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);font-size:14px;transition:background-color .14s,color .14s}
.sqbox .sqx:hover{background:var(--brand-soft);color:var(--brand)}
.sqbox .sqx[hidden]{display:none}
.sqform .btn{flex:none;min-height:48px}
.sqprompt p{margin:0 0 14px;color:var(--ink2);font-size:15px;line-height:1.55}
.sqprompt .qchips{display:flex;flex-wrap:wrap;gap:8px}


/* ============ сетка и карточка (§6) ============
   Одинаковая геометрия в ряду: карточка растянута на высоту ряда, название — ровно две строки,
   параметры — одна строка, цена, статус и кнопка прижаты к низу */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
/* карточка — «лицо» магазина: белая, радиус --rl (один с .cat и .pcard), тень только на hover.
   transition перечислен по свойствам: сплошной .16s тянул бы и цвет текста при перерисовке */
.card{height:100%;border:1px solid var(--line);border-radius:var(--rl);background:#fff;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;cursor:pointer;text-align:left}
.card:hover{box-shadow:var(--sh);border-color:var(--brand);transform:translateY(-3px)}
/* фокус попадает на ссылку-название внутри — кольцо рисуем у всей карточки */
.card:active{transform:scale(.985);box-shadow:none}
.card:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.card h4 a:focus-visible{outline:none}
/* фото: одинаковое внутреннее поле, contain — ничего не обрезаем и не увеличиваем */
.card .ph{aspect-ratio:4/5;display:grid;place-items:center;padding:10px;position:relative;background:#fff;overflow:hidden;color:inherit;flex:none}
/* pic() отдаёт <picture><img>; display:contents оставляет позиционирование на самом img */
.card .ph picture{display:contents}
/* абсолютные отступы, а не проценты высоты: иначе в Safari фото выходит за рамку и наезжает на название */
.card .ph img{position:absolute;inset:10px;width:auto;height:auto;max-width:calc(100% - 20px);max-height:calc(100% - 20px);margin:auto;object-fit:contain}
.card .body{padding:12px 14px 15px;display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0}
/* название ровно в две строки: и короткое занимает ту же высоту — цены в ряду стоят на одной линии */
.card h4{margin:0;font-size:14.5px;line-height:1.35;font-weight:600;min-height:2.7em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.card h4 a{color:inherit}
/* параметры по категории — одна строка с многоточием; пустая строка держит высоту */
.card .cmeta{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.3;min-height:1.3em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .price{margin-top:auto;display:flex;align-items:baseline;column-gap:8px;row-gap:2px;padding-top:8px;flex-wrap:wrap}
/* цена — главное число карточки: tabular-nums, чтобы соседние карточки не «плясали» разрядами */
.card .price b{font-size:20px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
/* «цена по запросу» — не цена, кричать как 20px/700 ей незачем */
.card .price b.ask{font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink2);white-space:normal}
.card .price b.sale{color:var(--accent-d)}
.card .price s{color:var(--ink3);font-size:13px;font-variant-numeric:tabular-nums}
/* единица продажи рядом с ценой: «туба · 6 шт.», «бобина · 200 м» */
.card .price .unit{font-size:12.5px;color:var(--ink2);font-weight:500;letter-spacing:0;white-space:nowrap}
/* статус: «Предзаказ» (предзаказ не выдаём за наличие) */
.card .cstat{font-size:12px;font-weight:600;color:var(--ink2);line-height:1.3}
.card .badge{position:absolute;top:10px;left:10px;z-index:2}
/* 44 px на любой ширине: планшет (800 px) тоже сенсорный, а медиа телефона до него не достаёт */
.card .cbtn{min-height:44px;font-size:14px;margin-top:6px;background:var(--brand);color:#fff;padding:0 12px}
.card .cbtn:hover{background:var(--brand2)}
/* точки цветов: настоящие мини-фото расцветок. На десктопе скрыты — скрытые lazy-картинки
   браузер не грузит; на телефоне их показывает media ниже */
.card .cdots{display:none}

/* заглушка вместо фото и метка «фото другого цвета».
   Подпись на --soft взята --ink2: --ink3 на этой подложке даёт 4.39:1 и AA не проходит */
.card .ph .nopic{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:14px;text-align:center;background:var(--soft);color:var(--ink2)}
.card .ph .nopic b{color:var(--brand);font-size:14px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.25}
.card .ph .nopic i{font-style:normal;font-size:11px;letter-spacing:.3px}
.card .ph .pnote{position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(255,255,255,.92);border:1px solid var(--line);
  color:var(--ink2);font-size:10.5px;padding:3px 7px;border-radius:20px;letter-spacing:.2px}

/* ============ каталог: панель фильтров слева ============ */
.catalog{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start}
.cmain{min-width:0}
/* панель прокручивается внутри себя: со всеми размерами обуви она иначе уходит за экран.
   Полосы прокрутки не видно (§7.7), прокрутка колесом, касанием и клавиатурой (tabindex у .fbody) остаётся */
.filters{position:sticky;top:calc(var(--hdr) + 12px);border:1px solid var(--line);border-radius:var(--rl);
  padding:4px 16px 14px;background:#fff;max-height:calc(100vh - var(--hdr) - 24px);display:flex;flex-direction:column}
.filters .fhead{display:none}
.filters .fbody{overflow:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0;scrollbar-width:none;-ms-overflow-style:none}
.filters .fbody::-webkit-scrollbar{display:none}
/* запас снизу: при максимальной прокрутке последняя строка («Ещё параметры») не упирается в прибитый
   ряд .fbtns — иначе дробная прокрутка отдаёт ему нижний пиксель тап-зоны (43 вместо 44) */
.filters .fbody{padding-bottom:4px;scroll-padding-bottom:4px}
.filters .fbody:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--r)}
.fgroup{border-bottom:1px solid var(--line);padding:14px 0}
.fbody>.fgroup:last-child,.fmore .fgroup:last-child{border:0}
.fbtns{display:flex;gap:10px;border:0;flex:none}
.fbtns .showbtn{display:none}
.fgroup h5{margin:0 0 9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink2);font-weight:700}
.fopt{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14.5px;cursor:pointer;color:var(--ink2);min-height:34px}
.fopt:hover{color:var(--brand)}
/* выбранную опцию видно, не выискивая галочку; :has старые браузеры просто игнорируют */
.fopt:has(input:checked){color:var(--brand)}
.fopt input{width:18px;height:18px;accent-color:var(--brand);flex:none}
.fopt span:not(.n){min-width:0;overflow:hidden;text-overflow:ellipsis}
.fopt .n{margin-left:auto;color:var(--ink3);font-size:12px;flex:none}
/* чипы значений (размер, скорость, калибр, цвет): множественный выбор, aria-pressed.
   Выбранный — мягкая синяя пилюля, как .chip активных фильтров */
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;font-size:13.5px;color:var(--ink2);cursor:pointer;transition:border-color .14s,background-color .14s,color .14s,transform .12s}
.fchip:hover{border-color:var(--brand3);color:var(--brand)}
.fchip[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600}
.fchip .n{font-size:11px;color:var(--ink3);font-weight:500}
/* счётчику возвращаем цвет пилюли: --ink3 на --brand-soft даёт 4.15:1 и на 11px не проходит */
.fchip[aria-pressed=true] .n{color:inherit}
/* отклик на нажатие (на телефоне наведения нет): после :hover и [aria-pressed], чтобы каскад не перебил */
.fchip:active{transform:scale(.97);border-color:var(--brand)}
.fchip:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* размеры — компактная сетка чипов (обувь: 35 значений), а не простыня чекбоксов */
.fg-size .fchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
.fg-size .fchip{padding:0 4px;flex-direction:column;gap:0;line-height:1.1}
/* цвет: кружок-образец + название группы */
.fchip .sw{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.18)}
.fg-swatch .fchip{justify-content:flex-start}
/* «Ещё параметры» — раскрываемая группа */
.fmore{border-top:1px solid var(--line)}
.fmore>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;
  font-weight:700;font-size:14px;color:var(--brand)}
.fmore>summary::-webkit-details-marker{display:none}
.fmore>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s;margin-right:4px}
.fmore[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.fmore>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--r)}
.range{display:flex;gap:8px;align-items:center}
.range input{width:100%;min-width:0;height:40px;border:1px solid var(--line);border-radius:var(--r);padding:0 11px}

/* ============ компактная панель: Фильтры · Сортировка ▾ · Найдено (§5) ============
   Одна строка на 390 px при обычном тексте; при крупном системном тексте элементы переносятся целиком */
.toolbar{display:flex;gap:8px 10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .count{margin-left:auto;color:var(--ink2);font-size:14.5px;white-space:nowrap}
.toolbar .count b{color:var(--brand);font-variant-numeric:tabular-nums}
/* «Фильтры» — вторая кнопка бренда: белая, синяя рамка, синий текст. На десктопе не нужна: панель слева */
.fbtn{display:none;align-items:center;gap:7px;height:44px;padding:0 13px;border:1.5px solid var(--brand);border-radius:var(--r);
  font-weight:700;color:var(--brand);background:#fff;transition:.15s;white-space:nowrap;flex:none}
.fbtn:hover{background:var(--brand-soft)}
.fbtn:active{transform:scale(.97)}
/* счётчик активных фильтров — маленькая оранжевая точка: сигналит, что выдача урезана */
.fbtn .cnt{background:var(--accent-d);color:#fff;border-radius:99px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11.5px;padding:0 6px}
/* сортировка: кнопка с краткой подписью текущего порядка + список */
.sortwrap{position:relative;flex:0 1 auto;min-width:0}
.sortbtn{display:inline-flex;align-items:center;gap:6px;height:44px;max-width:100%;padding:0 12px;border:1.5px solid var(--line);
  border-radius:var(--r);background:#fff;color:var(--ink);font-size:14.5px;white-space:nowrap;transition:border-color .15s,transform .12s}
.sortbtn:hover,.sortbtn[aria-expanded=true]{border-color:var(--brand3)}
.sortbtn:active{transform:scale(.97)}
.sortbtn .sk{color:var(--ink2)}
.sortbtn b{font-weight:700;color:var(--brand);overflow:hidden;text-overflow:ellipsis}
.sortbtn .dn{flex:none;color:var(--brand);transition:transform .15s}
.sortbtn[aria-expanded=true] .dn{transform:rotate(180deg)}
.sortbtn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand)}
/* десктоп: поповер под кнопкой */
.sortmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:250px;padding:6px;background:#fff;
  border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh);display:grid;gap:2px}
.sortmenu[hidden]{display:none}
.sortmenu .sopt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;
  border-radius:var(--r);text-align:left;font-size:14.5px;color:var(--ink);white-space:nowrap}
.sortmenu .sopt:hover{background:var(--soft);color:var(--brand)}
.sortmenu .sopt.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
.sortmenu .sopt.on::after{content:"✓";font-weight:700}
/* нажатие: после :hover и .on — у выбранного пункта фон тот же, поэтому ещё и лёгкое сжатие */
.sortmenu .sopt:active{background:var(--brand-soft);color:var(--brand);transform:scale(.985)}
.sortmenu .sopt:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* вуаль под листом сортировки — только на телефоне */
#sveil{display:none}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
/* [hidden] сам по себе не победит .chips{display:flex} — правило нужно явно */
.chips[hidden]{display:none}
.chips .creset{background:#fff;border-color:var(--brand);font-weight:700}
#cmore{display:flex;justify-content:center;padding:22px 0 4px}
#cmore:empty{display:none;padding:0}
#cmore .morebtn{min-width:240px}

/* пустой результат: причина и действия (§4). Цвет --ink2, а не --ink3:
   на подложке --soft третичный даёт 4.39:1 и AA не проходит */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--ink2);
  padding:48px 20px;border:1px solid var(--line);border-radius:var(--rl);background:var(--soft)}
.empty b{color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.3;max-width:520px;overflow-wrap:anywhere}
.empty svg{color:var(--brand)}
.empty span{max-width:380px;font-size:14px;color:var(--ink2)}
.empty .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.empty .acts .btn{min-width:150px}
/* единственный декоративный слой каталога — «след волана» в пустом поле справа сверху.
   Ограничен #cres: класс .empty утекает в .gal .main.empty карточки товара.
   isolation:isolate нужен, чтобы полосы с z-index:-1 легли НАД фоном блока, а не под ним;
   overflow:hidden родителя держит хвост внутри — на 390px по горизонтали ничего не вылезает */
#cres .empty{position:relative;overflow:hidden;isolation:isolate}
#cres .empty::before,#cres .empty::after{content:"";position:absolute;z-index:-1;
  right:-5%;height:9px;border-radius:5px;pointer-events:none;transform:rotate(var(--skew));transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent,var(--accent))}
/* длинная и короткая полосы разнесены по высоте: рядом одинаковые читаются как пятно, а не как след */
#cres .empty::before{top:20%;width:32%;opacity:.7}
#cres .empty::after{top:32%;width:17%;opacity:.4}

/* шапка каталога с круглой кнопкой «назад» (парная запись для .pagehead — в pages.css).
   nowrap: длинный грузинский заголовок не должен сбрасывать кнопку на отдельную строку */
.sec-head.cathead{display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:nowrap}
.sec-head.cathead>div{flex:1 1 auto;min-width:0}
.sec-head.cathead h2{overflow-wrap:anywhere}
.sec-head.cathead .rnd{flex:0 0 auto}
/* надзаголовок (11px + 9px отступа) поднимает центр текстового блока на 10px — возвращаем
   кнопку к центру h2. :not(:has(p)) обязателен: с подзаголовком блок и так висит ниже h2,
   и добавка увела бы кнопку вдвое дальше. Без кикера правило не сработает — ничего не съедет */
.sec-head.cathead:has(.kicker):not(:has(p)) .rnd{margin-top:20px}

/* вуаль под шторкой фильтров: общая, но на десктопе панель видна всегда и вуаль не нужна */
#fveil{position:fixed;inset:0;background:rgba(8,12,20,.45);z-index:94;opacity:0;pointer-events:none;transition:.2s;touch-action:none}
#fveil.on{opacity:1;pointer-events:auto}
@media(min-width:1081px){ #fveil{display:none} }

/* ============ планшет и телефон: фильтры уезжают в нижнюю шторку ============
   диапазон тот же, что и у #fveil: вуаль без шторки поверх неё запирала экран на 761–1080px */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .catalog{grid-template-columns:minmax(0,1fr)}
  .filters{position:static;display:none;max-height:none}
  .fbtn{display:inline-flex}
  /* шторка: шапка и кнопки прибиты, прокручивается только .fbody.
     z-index обязательно выше вуали (#fveil = 94), иначе вуаль перехватывает тапы по чекбоксам */
  .filters.open{display:flex;position:fixed;inset:auto 0 0 0;z-index:95;border-radius:20px 20px 0 0;max-height:82vh;max-height:82dvh;overflow:hidden;
    box-shadow:0 -14px 44px rgba(0,0,0,.22);padding:0 16px calc(12px + var(--safeB));
    animation:sheetUp .22s ease}
  /* пока шторку тянут пальцем за ручку, анимацию выезда не крутим */
  .filters.open.drag{animation:none;transition:none}
  .filters .fhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;
    padding:12px 0 10px;border-bottom:1px solid var(--line);position:relative}
  /* прибитые части шторки не должны прокручивать страницу под собой: touch-action:none
     ставим только на них, .fbody обязан остаться прокручиваемым (у него overscroll-behavior) */
  .filters.open .fhead,.filters.open .fbtns{touch-action:none}
  .filters .fhead b{font-size:16px}
  .filters .fhead:before{content:"";position:absolute;left:50%;top:5px;transform:translateX(-50%);
    width:42px;height:4px;border-radius:3px;background:var(--line)}
  .filters .fhead .close{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    background:var(--soft);color:var(--brand);font-size:15px;margin-right:-6px}
  /* кнопки «Сбросить» и «Показать N товаров» прибиты к низу листа при любом содержимом */
  .fbtns{display:flex;gap:10px;align-items:center;padding-top:12px;padding-bottom:0;background:#fff;border-top:1px solid var(--line)}
  .fbtns .chip{flex:none}
  .fbtns .showbtn{display:inline-flex;flex:1;min-height:46px;min-width:0;padding:0 14px}
  /* размеры обуви в листе — по 6–8 в ряд */
  .fg-size .fchips{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}
}
/* на планшете шторка во всю ширину выглядит пустой — держим по центру */
@media(min-width:761px) and (max-width:1080px){
  .filters.open{width:min(620px,100%);margin:0 auto;border-radius:20px 20px 0 0}
}

/* ============ phone ============ */
@media(max-width:760px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* карточка отдана фото и цене: подписи плотнее, кнопка заявки — та же заливка, что на десктопе */
  .card .body{padding:8px 10px 11px;gap:3px}
  .card h4{font-size:13.5px}
  .card .cmeta{font-size:12px}
  .card .price{padding-top:6px;column-gap:6px}
  .card .price b{font-size:19px}
  .card .price .unit{font-size:12px}
  .card .cbtn{min-height:44px;padding:0 10px;font-size:13.5px}
  .card .ph{padding:8px}
  /* ярлык в ту же сетку, что и уменьшенный отступ фото */
  .card .badge{top:8px;left:8px}
  .card .ph img{inset:8px;max-width:calc(100% - 16px);max-height:calc(100% - 16px)}
  /* отклик на тап: .card:active из общей части даёт .985 — на пальце это почти незаметно */
  .card{transition:transform .12s ease,box-shadow .16s}
  .card:active{transform:scale(.97)}
  /* Точки цветов вместо строчки «3 цвета» — видно сразу, чем товар отличается.
     Только в сетке каталога: на главной это ещё десяток картинок в первом экране,
     они отбирали полосу у главного фото (LCP). */
  #cgrid .card .cdots{display:flex;align-items:center;gap:4px;margin-top:1px}
  #cgrid .card .cdots i{width:22px;height:22px;border:1px solid var(--line);border-radius:50%;
    overflow:hidden;background:#fff;display:block;flex:none}
  #cgrid .card .cdots i img{width:22px;height:22px;object-fit:cover;display:block}
  /* кружок цветом вместо мини-фото: тот же размер, но без запроса к сети */
  #cgrid .card .cdots i.chex{border-color:rgba(0,0,0,.18)}
  #cgrid .card .cdots em{font-style:normal;font-size:11px;color:var(--ink3);font-weight:600}
  /* content-visibility:auto у карточек ниже первого экрана убран (MOB-02): неразмеченная карточка
     держала высоту-заглушку 360 px вместо настоящих 382/408, ряды выше экрана при «назад» становились
     ниже, и восстановленный scrollY приводил человека не к той карточке. Геометрия карточки теперь
     не зависит от того, докрутили до неё или нет; фото и так грузятся лениво (loading=lazy) */
  /* «показать ещё»: порция проявляется, а не возникает рывком */
  @keyframes cardIn{from{opacity:0;transform:translateY(8px)}}
  .card.cin{animation:cardIn .25s ease both}

  /* панель: 44 px, шрифт ≥13.5 px; «Сортировка:» на телефоне только для скринридера — кнопка
     показывает краткую подпись порядка, иначе ряд не помещается в 390 px */
  .toolbar{gap:8px}
  .fbtn{height:44px;padding:0 11px;font-size:14px;gap:5px}
  .fbtn .cnt{min-width:19px;height:19px;padding:0 5px}
  /* сортировка берёт место между «Фильтры» и «Найдено»: basis 0 — ряд не переносится из-за неё,
     min-width в em — при крупном системном тексте она уходит на новую строку целиком. Если места
     совсем мало (ka + счётчик фильтров), краткая подпись порядка сокращается многоточием, а не рвёт ряд */
  /* font-size как у .sortbtn: иначе 8.5em считались от 15 px обёртки (127.5 px) и ka с фильтром
     и трёхзначным счётчиком уходил на вторую строку */
  .sortwrap{flex:1 1 0;min-width:min(100%,8.5em);font-size:14px}
  .sortbtn{height:44px;padding:0 9px;font-size:14px;gap:4px}
  .sortbtn b{min-width:0}
  .sortbtn .dn{width:14px;height:14px}
  .sortbtn .sk{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .toolbar .count{font-size:13.5px;margin-left:0}
  /* список сортировки — лист снизу с вуалью; выше нижней панели и шапки */
  #sveil{display:block;position:fixed;inset:0;background:rgba(8,12,20,.45);z-index:96;opacity:0;pointer-events:none;transition:opacity .2s;touch-action:none}
  #sveil.on{opacity:1;pointer-events:auto}
  .sortmenu{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:97;min-width:0;max-height:80vh;overflow:auto;
    border-radius:20px 20px 0 0;border:0;padding:8px 16px calc(14px + var(--safeB));box-shadow:0 -14px 44px rgba(0,0,0,.22);
    animation:sheetUp .22s ease;gap:4px}
  .sortmenu::before{content:attr(data-title);display:block;padding:10px 4px 8px;font-size:16px;font-weight:700;color:var(--ink);
    border-bottom:1px solid var(--line);margin-bottom:4px}
  .sortmenu .sopt{min-height:48px;font-size:15px}

  /* тап-зоны 44 px */
  .fopt{min-height:44px}
  .fchip{min-height:44px}
  .range input{height:44px}
  .filters .fhead .close{width:44px;height:44px}
  .sec-head a{display:inline-flex;align-items:center;min-height:44px}
  .chips .chip button{min-width:44px;min-height:44px;margin:-12px -14px -12px -8px}
  .empty{padding:36px 16px}
  .empty .acts .btn{min-width:0;flex:1 1 100%}
  #cmore .morebtn{min-width:0;width:100%}
  .sqbox .sqx{width:44px;height:44px}

  /* лента разделов: пункт — полноценная тап-зона 44 px */
  .shopbar .catrow{height:44px}
  .shopbar .catrow a{min-height:44px;font-size:13.5px;padding:0 11px}
  .shopbar .catrow a.on::after{left:11px;right:11px}
  section.shop{padding-top:18px}
  /* плитки — горизонтальная лента: фото сверху, подпись снизу. Отрицательные поля выводят ленту
     к краям экрана, внутренний отступ держит первую плитку на линии текста; шире экрана не становится */
  .shtiles{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
    margin:0 calc(-1*var(--gut)) 26px;padding:2px var(--gut) 4px;scroll-padding:0 var(--gut)}
  .shtiles::-webkit-scrollbar{display:none}
  .shtile{flex:0 0 132px;flex-direction:column-reverse;align-items:stretch;gap:8px;min-height:0;padding:8px 8px 11px;scroll-snap-align:start}
  .shtile:hover{transform:none;box-shadow:none}
  .shtile .tp{width:100%;height:auto;aspect-ratio:1}
  .shtile b{font-size:13.5px}
  .shtile i{font-size:12px}
  .shfeat{margin-bottom:30px}
  .sqform{margin-bottom:16px}
  .sqform .btn{padding:0 16px}
  .sqprompt .qchips .chip{min-height:44px}
  /* надзаголовок-ссылка «Магазин»: тап-зона 44 px за счёт полей, макет не сдвигается */
  a.kicker{padding:17px 0;margin-top:-17px;margin-bottom:-8px}
}
@media(max-width:400px){
  .grid{gap:10px}
  .card h4{font-size:13px}
  /* панель §5 на 360–400 px: уже поля и промежутки — полная подпись сортировки помещается в одну
     строку с «Фильтры (n)» и «Найдено: N»; тап-зона по высоте прежняя (44 px) */
  .toolbar{gap:6px}
  .fbtn{padding:0 7px;gap:4px}
  .sortbtn{padding:0 6px;gap:3px}
  .sortbtn .dn{width:12px;height:12px}
}