/* ===== 20.08, ИТОГ ПО ВЕСАМ: ВЕЗДЕ 800 =====
   Днём пробовали развести уровни весом — заголовки 800, всё внутреннее 700. Владелец посмотрел
   вживую и вернул 800 везде: «как без жирности». Итог: единый вес 800, иерархию держит КЕГЛЬ
   (56 у заголовка страницы, 40 у плитки категории, 22-16 внутри карточек).
   ★ Веса 900 у Wix Madefor Display НЕ существует (Google Fonts на wght@900 отдаёт HTTP 400),
   поэтому «сделать заголовок жирнее плитки» внутри этого шрифта нельзя — 800 это потолок.
   ★ Почему мелкое кажется жирнее крупного при одном весе: штрих составляет большую долю кегля
   (плитка 40/800 = 18,3% против 17,9% у заголовка 56/800), плюс белое на чёрном даёт +2,5%.
   Это физика набора, а не дефект. НЕ переигрывать без прямой просьбы владельца. */
/* Foam Heroes — Каталог. Всё scoped под #catalog (без коллизий с main.css). Шапка/подвал — из shell(). Токены/дизайн из макета style.css. */
#catalog{--ink:#0C0C0C;--paper:#F2F3F5;--white:#fff;--acid:#FFD02F;--acid-deep:#F5B90A;
--ink-16:rgba(12,12,12,.16);--ink-55:rgba(12,12,12,.62);--hairline:1.5px solid rgba(12,12,12,.16);--border:1.5px solid #0C0C0C;
--r-card:14px;--r-chip:999px;--t-med:.25s cubic-bezier(.2,.7,.2,1);--shadow-sticker:6px 6px 0 #0C0C0C;--s-3:24px;
--f-disp:"Wix Madefor Display",system-ui,sans-serif;--f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"JetBrains Mono",ui-monospace,monospace;background:var(--paper);color:var(--ink);font-family:var(--f-body)}
#catalog .prod-grid{ align-items: stretch; }
#catalog .fh-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--hairline, 1.5px solid var(--ink-16));
  border-radius: var(--r-card, 14px);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  isolation: isolate;
  transition: transform var(--t-med, .25s cubic-bezier(.2,.7,.2,1)),
              box-shadow var(--t-med, .25s cubic-bezier(.2,.7,.2,1)),
              border-color var(--t-med, .25s);
}
#catalog .fh-card:hover{
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-sticker, 6px 6px 0 var(--ink));
  border-color: var(--ink);
}
#catalog .fh-card:active{ transform: scale(.99); }
#catalog .fh-card__accent{
  height: 5px;
  background: var(--cat, var(--acid));
  flex: 0 0 auto;
}
#catalog .fh-card__media{
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 14px;
  background:
    radial-gradient(120% 120% at 50% 12%, #fff 0%, #fff 55%, #f4f5f7 100%);
  border-bottom: var(--hairline, 1.5px solid var(--ink-16));
  overflow: hidden;
}
#catalog .fh-card__media img{
  max-width: 86%; max-height: 86%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform var(--t-med, .3s cubic-bezier(.2,.7,.2,1));
}
#catalog .fh-card:hover .fh-card__media img{ transform: scale(1.06) rotate(-1.5deg); }
#catalog .fh-badge{
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-family: var(--f-mono, monospace);
  font-weight: 700; font-size: 11px; line-height: 1;
  text-transform: uppercase; letter-spacing: .03em;
  padding: 6px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
}
#catalog .fh-badge--hit{ background: var(--acid, #FFD02F); }
#catalog .fh-badge--new{ background: #63BF4A; color:#fff; }
#catalog .fh-badge--sale{ background: #E63A7E; color:#fff; }
#catalog .fh-card__wish{
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.8);
  border: 1.5px solid var(--ink-16);
  color: var(--ink-55);
  font-size: 15px;
  opacity: 0; transform: scale(.7);
  transition: opacity .2s, transform .2s, color .2s, border-color .2s;
}
#catalog .fh-card:hover .fh-card__wish{ opacity: 1; transform: none; }
#catalog .fh-card__wish:hover{ color: #E63A7E; border-color:#E63A7E; }
#catalog .fh-card__cart{
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px;
  font-family: var(--f-disp, sans-serif);
  font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink);
  background: var(--acid, #FFD02F);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s;
}
#catalog .fh-card__cart::before{ content:"+"; font-size:16px; }
#catalog .fh-card:hover .fh-card__cart{ transform: none; opacity: 1; }
#catalog .fh-card__cart:hover{ background: var(--acid-deep, #F5B90A); }
#catalog .fh-card__body{
  display: flex; flex-direction: column;
  gap: 7px;
  padding: 14px 16px 16px;
  flex: 1 1 auto;
}
#catalog .fh-card__rate{ display:flex; align-items:center; gap:6px; }
#catalog .fh-stars{
  position: relative; display: inline-block;
  font-size: 13px; line-height: 1; letter-spacing: 1.5px;
  color: var(--ink-16);
}
#catalog .fh-stars::before{ content: "\2605\2605\2605\2605\2605"; }
#catalog .fh-stars i{
  position: absolute; inset: 0; overflow: hidden;
  white-space: nowrap; color: var(--acid-deep, #F5B90A);
}
#catalog .fh-stars i::before{ content: "\2605\2605\2605\2605\2605"; }
#catalog .fh-card__rnum{ font-family: var(--f-mono, monospace); font-size: 12px; font-weight: 700; }
#catalog .fh-card__rcnt{ font-family: var(--f-mono, monospace); font-size: 11.5px; color: var(--ink-55); }
#catalog .fh-card__name{
  font-family: var(--f-disp, sans-serif);
  font-weight: 800; font-size: 1rem; line-height: 1.18;
  text-transform: uppercase; letter-spacing: -.01em;
  margin: 1px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#catalog .fh-card__line{
  font-family: var(--f-body, sans-serif);
  font-size: 12.5px; color: var(--ink-55);
  margin: 0;
}
#catalog .fh-stock{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono, monospace); font-size: 11.5px; font-weight: 600;
  color: #1a7f37;
  margin-top: 1px;
}
#catalog .fh-stock i{
  width: 7px; height: 7px; border-radius: 50%;
  background: #22a44e; box-shadow: 0 0 0 3px rgba(34,164,78,.16);
}
#catalog .fh-stock--order{ color: var(--ink-55); }
#catalog .fh-stock--order i{ background: #d69e2e; box-shadow: 0 0 0 3px rgba(214,158,46,.16); }
#catalog .fh-card__meta{
  margin-top: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  padding-top: 10px;
}
#catalog .fh-card__price{
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
#catalog .fh-card__price b{
  font-family: var(--f-disp, sans-serif);
  font-weight: 800; font-size: 1.32rem; line-height: 1;
}
#catalog .fh-rub{ font-family: var(--f-disp, sans-serif); font-weight: 800; font-size: .95rem; color: var(--ink-55); }
#catalog .fh-price__old{
  font-family: var(--f-body, sans-serif); font-weight: 600; font-size: .82rem;
  color: var(--ink-55); text-decoration: line-through; margin-right: 2px;
}
/* Пакет Б: артикул был невидим (10.5px, 16% чёрного, контраст ~1.5:1) — а при похожих именах это единственный различитель */
#catalog .fh-card__art{
  font-family: var(--f-mono, monospace); font-size: 11.5px;
  color: var(--ink-55); letter-spacing: .03em;
}
@media (max-width: 900px){#catalog .fh-card__name{ font-size: .94rem; }
#catalog .fh-card__cart{ opacity: 1; transform: none; }
#catalog .fh-card__wish{ opacity: 1; transform: none; }
}
@media (max-width: 560px){#catalog .fh-card__body{ padding: 12px 12px 14px; gap: 6px; }
#catalog .fh-card__price b{ font-size: 1.18rem; }
}
#catalog .wrap{max-width:1280px;margin:0 auto;padding:40px 32px 0}
@media(max-width:560px){#catalog .wrap{padding:28px 16px 0}
}
/* шапка корня каталога с 09.08 — стандартный page-head из main.css (свои .eyebrow/.h1/.lead удалены) */
#catalog .cat-nav{position:sticky;top:64px;z-index:40;display:flex;flex-wrap:wrap;gap:10px;
 padding:14px 0;margin:0 0 8px;background:linear-gradient(var(--paper) 70%,transparent)}
#catalog .cat-chip{font-family:var(--f-disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;
 cursor:pointer;padding:9px 16px;border:1.5px solid var(--ink-16);border-radius:var(--r-chip);background:var(--white);
 color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:all var(--t-med)}
#catalog .cat-chip span{font-family:var(--f-mono);font-size:11px;color:var(--ink-55)}
#catalog .cat-chip:hover{border-color:var(--ink)}
#catalog .cat-chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:3px 3px 0 var(--gc,var(--acid))}
#catalog .cat-chip.is-active span{color:rgba(255,255,255,.7)}
#catalog .line-group{margin:38px 0 0;scroll-margin-top:130px}
#catalog .line-group__head{display:flex;align-items:center;gap:14px;margin:0 0 4px}
#catalog .line-group__bar{width:36px;height:36px;border-radius:10px;background:var(--gc);flex:0 0 auto;
 border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
#catalog .line-group__head h2{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2rem);margin:0}
#catalog .line-group__cnt{font-family:var(--f-mono);font-size:12px;color:var(--ink-55);margin-left:auto}
#catalog .subcat{margin:24px 0 0;scroll-margin-top:130px}
#catalog .subcat__head{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;
 padding-bottom:8px;border-bottom:1.5px solid var(--ink-16)}
#catalog .subcat__head h3{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:1.05rem;margin:0;letter-spacing:-.01em}
#catalog .subcat__cnt{font-family:var(--f-mono);font-size:11px;color:#fff;background:var(--ink);border-radius:999px;padding:2px 8px}
#catalog .prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
@media(max-width:1100px){#catalog .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){#catalog .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Пакет Б (утв. владельцем): 2 компактные колонки вместо 1 гиганта (8 товаров были ~13 экранов) */
@media(max-width:520px){#catalog .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
#catalog .fh-card{cursor:pointer}
#catalog .is-hidden{display:none!important}
#catalog .note{margin-top:44px;padding:16px 20px;border:1.5px dashed var(--ink-16);border-radius:14px;
 font-size:13px;color:var(--ink-55);font-family:var(--f-mono);line-height:1.6}
#catalog .qv[hidden]{display:none}
#catalog .qv{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
#catalog .qv__backdrop{position:absolute;inset:0;background:rgba(12,12,12,.55);backdrop-filter:blur(3px)}
#catalog .qv__panel{position:relative;z-index:1;background:var(--white);border:1.5px solid var(--ink);
 border-radius:20px;box-shadow:10px 10px 0 var(--ink);width:min(880px,100%);max-height:90vh;overflow:auto;
 display:grid;grid-template-columns:1.05fr 1fr;animation:qvin .22s cubic-bezier(.2,.7,.2,1)}
@keyframes qvin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
#catalog .qv__close{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;
 border:1.5px solid var(--ink);background:var(--white);font-size:22px;line-height:1;cursor:pointer}
#catalog .qv__close:hover{background:var(--acid)}
#catalog .qv__media{position:relative;background:radial-gradient(120% 120% at 50% 12%,#fff 55%,#f4f5f7);
 display:grid;place-items:center;padding:32px;border-right:1.5px solid var(--ink-16)}
#catalog .qv__accent{position:absolute;top:0;left:0;right:0;height:6px;background:var(--cat,var(--acid))}
#catalog .qv__media img{max-width:88%;max-height:360px;object-fit:contain}
#catalog .qv__info{padding:30px 30px 26px;display:flex;flex-direction:column;gap:10px}
#catalog .qv__cat{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-55);margin:0}
#catalog .qv__name{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1.12;margin:0}
#catalog .qv__rate{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:13px}
#catalog .qv__rate .fh-stars{font-size:16px}
#catalog .qv__rcnt{color:var(--ink-55)}
#catalog .qv__price{display:flex;align-items:baseline;gap:6px;margin-top:2px}
#catalog .qv__price b{font-family:var(--f-disp);font-weight:800;font-size:2rem;line-height:1}
#catalog .qv__old{font-family:var(--f-body);font-weight:600;font-size:1rem;color:var(--ink-55);text-decoration:line-through}
#catalog .qv__row{display:flex;align-items:center;gap:12px;font-size:13px}
#catalog .qv__label{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;color:var(--ink-55);width:70px}
#catalog .qv__pill{border:1.5px solid var(--ink);border-radius:999px;padding:5px 14px;font-weight:700;font-family:var(--f-disp);font-size:13px}
#catalog .qv__art{font-family:var(--f-mono);font-size:12px;color:var(--ink-55)}
#catalog .qv__desc{font-size:14px;color:var(--ink-55);line-height:1.55;margin:6px 0}
#catalog .qv__buy{display:flex;gap:12px;margin-top:4px}
#catalog .qv__qty{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:12px;overflow:hidden}
#catalog .qv__qty button{width:40px;height:46px;border:0;background:var(--white);font-size:18px;cursor:pointer}
#catalog .qv__qty button:hover{background:var(--paper)}
#catalog .qv__qty span{width:40px;text-align:center;font-family:var(--f-disp);font-weight:800}
#catalog .qv__cart{flex:1;height:46px;border:1.5px solid var(--ink);border-radius:12px;background:var(--acid);
 font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
#catalog .qv__cart:hover{background:var(--acid-deep)}
#catalog .qv__trust{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:10px 0 0;
 font-family:var(--f-mono);font-size:11.5px;color:var(--ink-55)}
@media(max-width:640px){#catalog .qv__panel{grid-template-columns:1fr;max-height:94vh}
#catalog .qv__media{padding:22px}
#catalog .qv__media img{max-height:220px}
}
#catalog .crumbs{font-family:var(--f-mono);font-size:12px;color:var(--ink-55);margin:0 0 22px;text-transform:uppercase;letter-spacing:.04em}
#catalog .crumbs a{color:var(--ink-55);text-decoration:none}
#catalog .crumbs a:hover{color:var(--ink)}
#catalog .crumbs b{color:var(--ink);font-weight:700}
#catalog .pd{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start}
@media(max-width:820px){#catalog .pd{grid-template-columns:1fr;gap:26px}
}
#catalog .pd__media{position:relative;background:radial-gradient(120% 120% at 50% 12%,#fff 55%,#f4f5f7);
 border:1.5px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--ink);
 display:grid;place-items:center;padding:44px;aspect-ratio:1;overflow:hidden}
#catalog .pd__accent{position:absolute;top:0;left:0;right:0;height:6px;background:var(--cat,var(--acid))}
#catalog .pd__badge{position:absolute;top:16px;left:16px;font-family:var(--f-mono);font-weight:700;font-size:12px;
 text-transform:uppercase;padding:6px 10px;border:1.5px solid var(--ink);border-radius:8px;transform:rotate(-3deg);box-shadow:2px 2px 0 var(--ink)}
#catalog .pd__badge--hit{background:var(--acid)}
#catalog .pd__badge--new{background:#63BF4A;color:#fff}
#catalog .pd__badge--sale{background:#E63A7E;color:#fff}
#catalog .pd__media img{max-width:82%;max-height:420px;object-fit:contain}
#catalog .pd__info{display:flex;flex-direction:column;gap:12px}
#catalog .pd__cat{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-55);margin:0}
#catalog .pd__name{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;margin:0}
#catalog .pd__rate{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:13px}
#catalog .pd__rate .fh-stars{font-size:17px}
#catalog .pd__rate .cnt{color:var(--ink-55)}
#catalog .pd__price{display:flex;align-items:baseline;gap:8px;margin:4px 0}
#catalog .pd__price b{font-family:var(--f-disp);font-weight:800;font-size:2.4rem;line-height:1}
#catalog .pd__price .fh-rub{font-size:1.3rem;color:var(--ink-55)}
#catalog .pd__old{font-family:var(--f-body);font-weight:600;font-size:1.1rem;color:var(--ink-55);text-decoration:line-through}
#catalog .pd__row{display:flex;align-items:center;gap:12px;font-size:13px}
#catalog .pd__label{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;color:var(--ink-55);width:80px}
#catalog .pd__pill{border:1.5px solid var(--ink);border-radius:999px;padding:6px 16px;font-weight:700;font-family:var(--f-disp);font-size:13px}
#catalog .pd__buy{display:flex;gap:12px;margin-top:8px}
#catalog .pd__qty{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:12px;overflow:hidden}
#catalog .pd__qty button{width:46px;height:52px;border:0;background:var(--white);font-size:20px;cursor:pointer}
#catalog .pd__qty button:hover{background:var(--paper)}
#catalog .pd__qty span{width:44px;text-align:center;font-family:var(--f-disp);font-weight:800;font-size:16px}
#catalog .pd__cart{flex:1;height:52px;border:1.5px solid var(--ink);border-radius:12px;background:var(--acid);
 font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:15px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
#catalog .pd__cart:hover{background:var(--acid-deep)}
#catalog .pd__trust{list-style:none;display:flex;flex-wrap:wrap;gap:16px;padding:0;margin:14px 0 0;font-family:var(--f-mono);font-size:12px;color:var(--ink-55)}
#catalog .pd-sec{margin-top:64px}
#catalog .pd-sec h2{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:1.4rem;margin:0 0 18px;
 display:flex;align-items:center;gap:12px}
#catalog .pd-sec h2::before{content:"";width:26px;height:3px;background:var(--acid-deep)}
#catalog .pd__desc{font-size:16px;line-height:1.7;color:var(--ink);max-width:760px}
#catalog .pd__desc .muted{color:var(--ink-55);font-size:14px;margin-top:12px}
#catalog .specs{width:100%;max-width:640px;border-collapse:collapse}
#catalog .specs td{padding:12px 4px;border-bottom:1.5px solid var(--ink-16);font-size:14px;vertical-align:top}
#catalog .specs tr td:first-child{font-family:var(--f-mono);text-transform:uppercase;font-size:11px;color:var(--ink-55);width:200px;letter-spacing:.03em}
#catalog .specs tr td:last-child{font-weight:600}
/* 19.08: линия рисовалась ПОД каждой строкой, включая последнюю — перед первой строкой линии
   не было, а после последней висела «в воздухе». Владелец: «сверху не добавлять, снизу убрать».
   Линии остаются только МЕЖДУ строками. */
#catalog .specs tr:last-child td{border-bottom:0}
#catalog .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:700;font-size:13px;
 text-transform:uppercase;text-decoration:none;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:9px 18px;margin-bottom:26px}
#catalog .back:hover{background:var(--acid)}
#catalog .cat-banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:8px 0 0}
@media(max-width:720px){#catalog .cat-banners{grid-template-columns:1fr}
}
#catalog .cat-banner{position:relative;overflow:hidden;border-radius:24px;border:1.5px solid var(--ink);
 background:#0C0C0C;color:#fff;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;
 padding:56px 36px 34px;text-decoration:none;box-shadow:6px 6px 0 var(--ink);
 transition:transform var(--t-med),box-shadow var(--t-med)}
#catalog .cat-banner:hover{transform:translate(-5px,-5px);box-shadow:14px 14px 0 var(--cc)}
#catalog .cat-banner.cb--wide{grid-column:1/-1;min-height:260px}
#catalog .cat-banner__glow{position:absolute;inset:0;background:radial-gradient(120% 100% at 78% 22%,var(--cc) 0%,transparent 62%);opacity:.5;transition:opacity var(--t-med)}
#catalog .cat-banner:hover .cat-banner__glow{opacity:.75}
#catalog .cat-banner__grain{position:absolute;inset:0;opacity:.25;mix-blend-mode:overlay;
 background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:5px 5px}
#catalog .cat-banner__num{position:absolute;top:26px;left:36px;font-family:var(--f-mono);font-size:14px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
#catalog .cat-banner__img{position:absolute;right:32px;top:48%;transform:translateY(-50%) rotate(-3deg);max-height:74%;max-width:44%;object-fit:contain;
 filter:drop-shadow(0 24px 44px rgba(0,0,0,.55));transition:transform var(--t-med)}
#catalog .cat-banner:hover .cat-banner__img{transform:translateY(-50%) rotate(0) scale(1.05)}
/* 19.08, вес плиток: ПРОБОВАЛИ 700 — владелец отверг («как без жирности»), вернули 800.
   История: сначала он спросил, почему названия категорий выглядят жирнее заголовка страницы.
   Замер штриха: плитка 18,8% от кегля против 17,7% у H1 — формально разница 6%, потому что
   при меньшем кегле штрих толще в долях. Снизили до 700 (15,0%) — стало явно легче заголовка,
   и это заметнее, чем прежний перевес. Причина исходного ощущения не в весе, а в инверсии:
   белое на чёрном зрительно расплывается. ★ НЕ снижать вес снова: промежутка между 700 и 800
   у Wix нет. ★★ 20.08 ВЫЯСНИЛОСЬ ГЛАВНОЕ: у Wix Madefor Display НЕТ начертания 900 —
   файл wixdisplay-900.woff2 это тот же ExtraBold (одинаковый размер до байта, одинаковая
   отрисовка), поэтому заголовок с весом 900 был РОВНО такой же жирности, как плитка с 800,
   и владелец видел «заголовок как без жирности». В скрипте примерки шрифта (swap_font.sh)
   пересчёт был записан сразу: заголовок 800, плитка 700 — но в боевой CSS его не перенесли.
   Ставим 700, как и задумывалось: штрих плитки 6,0 против 10,0 у заголовка.
   ★ 20.08, ПОЗЖЕ: по просьбе владельца вернули 800 — он хочет увидеть вживую, в весе ли дело.
   Замер обоих состояний на боевом: при 800 штрих плитки 7,33 = 18,3% кегля против 17,9% у
   заголовка (то есть В ПРОПОРЦИИ плитка перевешивает — ровно та претензия, с которой начали);
   при 700 штрих 5,67 = 14,2%. Промежутка между 700 и 800 у Wix нет, выбор двоичный. */
#catalog .cat-banner h2{position:relative;font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.5rem);margin:0;line-height:1.02}
#catalog .cat-banner__cnt{position:relative;font-family:var(--f-mono);font-size:13px;color:rgba(255,255,255,.7);margin-top:8px}
#catalog .cat-banner__subs{position:relative;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;max-width:70%}
#catalog .cat-banner__subs span, #catalog .cat-banner__subs a{font-family:var(--f-mono);font-size:11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 10px;color:rgba(255,255,255,.9);backdrop-filter:blur(2px)}
#catalog .cat-banner__go{position:absolute;top:22px;right:32px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
 display:grid;place-items:center;font-size:18px;color:#fff;transition:all var(--t-med)}
#catalog .cat-banner:hover .cat-banner__go{background:var(--cc);border-color:var(--cc);transform:rotate(-45deg)}
#catalog .cat-hero{position:relative;border-radius:24px;overflow:hidden;background:#0C0C0C;color:#fff;
 padding:44px 36px;margin-bottom:26px;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
#catalog .cat-hero__glow{position:absolute;inset:0;background:radial-gradient(90% 120% at 85% 10%,var(--cc) 0%,transparent 60%);opacity:.55}
#catalog .cat-hero__num{font-family:var(--f-mono);font-size:14px;color:rgba(255,255,255,.55);position:relative;letter-spacing:.08em}
/* 19.08 (просьба владельца): «строка с номером и нижняя слишком близко к названию».
   Замер: при заголовке в 48 точек зазоры были 6 сверху и 4 снизу — номер и подпись
   слипались с названием в одно пятно. Ставим 12 и 14: воздух пропорционален кеглю
   заголовка, а подпись остаётся его частью, не отрываясь в самостоятельный блок. */
#catalog .cat-hero h1{position:relative;font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4.4vw,3.4rem);margin:12px 0 14px}
#catalog .cat-hero p{position:relative;color:rgba(255,255,255,.75);margin:0;max-width:600px}
#catalog .subnav{display:flex;flex-wrap:wrap;gap:10px;position:sticky;top:64px;z-index:40;padding:14px 0;
 background:linear-gradient(var(--paper) 72%,transparent)}
#catalog .subnav a{font-family:var(--f-disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;
 text-decoration:none;color:var(--ink);padding:9px 16px;border:1.5px solid var(--ink-16);border-radius:var(--r-chip);
 background:var(--white);display:inline-flex;align-items:center;gap:8px;transition:all var(--t-med)}
#catalog .subnav a span{font-family:var(--f-mono);font-size:11px;color:var(--ink-55)}
#catalog .subnav a:hover{border-color:var(--ink)}
#catalog .subnav a.is-active{background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--cc)}
#catalog .subnav a.is-active span{color:rgba(255,255,255,.7)}
#catalog .buy-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
#catalog .buy-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 26px;
 font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.02em;
 border:1.5px solid var(--ink);border-radius:14px;text-decoration:none;box-shadow:3px 3px 0 var(--ink);
 transition:transform .12s,box-shadow .12s,background .18s}
#catalog .buy-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
#catalog .buy-btn:active{transform:none;box-shadow:1px 1px 0 var(--ink)}
#catalog .buy-btn--ozon{background:#005BFF;color:#fff}
#catalog .buy-btn--ozon:hover{background:#0048cc}
#catalog .buy-btn--ozon svg{width:18px;height:18px}
#catalog .buy-btn--dealers{background:var(--white);color:var(--ink)}
#catalog .buy-btn--dealers:hover{background:var(--acid)}
/* 09.08: многострочная подпись — читаемым Manrope, mono только для меток (анализ шрифтов) */
#catalog .buy-note{font-family:var(--f-body);font-size:13px;color:var(--ink-55);margin-top:12px}
#catalog .faq{margin-top:22px;border-top:1.5px solid var(--ink-16)}
#catalog .faq details{border-bottom:1.5px solid var(--ink-16)}
#catalog .faq summary{cursor:pointer;list-style:none;padding:16px 2px;font-family:var(--f-disp);font-weight:700;
 text-transform:uppercase;font-size:14px;display:flex;justify-content:space-between;align-items:center}
#catalog .faq summary::-webkit-details-marker{display:none}
#catalog .faq summary::after{content:"+";font-size:20px;color:var(--ink-55)}
#catalog .faq details[open] summary::after{content:"−"}
#catalog .faq .faq-body{padding:0 2px 18px;color:var(--ink-55);font-size:14px;line-height:1.6}
#catalog .prose p{margin:0 0 12px;line-height:1.7}
#catalog .prose ul{margin:0 0 14px;padding-left:20px}
#catalog .prose li{margin:0 0 7px;line-height:1.55}
#catalog .prose strong{font-weight:700}
#catalog .subcat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
@media(max-width:900px){#catalog .subcat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){#catalog .subcat-grid{grid-template-columns:1fr}
}
#catalog .subcard{position:relative;display:flex;flex-direction:column;min-height:190px;overflow:hidden;
 background:var(--white);border:1.5px solid var(--ink);border-radius:20px;padding:22px 22px 20px;
 text-decoration:none;color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform var(--t-med),box-shadow var(--t-med)}
#catalog .subcard:hover{transform:translate(-4px,-4px);box-shadow:11px 11px 0 var(--cc)}
#catalog .subcard__bar{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--cc)}
#catalog .subcard__num{font-family:var(--f-mono);font-size:12px;color:var(--ink-55);letter-spacing:.06em}
#catalog .subcard__title{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:1.12rem;line-height:1.1;margin:8px 0 0;max-width:66%}
/* Вариант «В» (19.08, выбор владельца): под названием подкатегории — два товара
   и «и ещё N». Ширину держим под фото: оно абсолютом справа (max-width 42%). */
#catalog .subcard__items{font-family:var(--f-mono);font-size:11px;line-height:1.5;letter-spacing:.01em;
 color:var(--ink-55);margin-top:7px;max-width:56%;position:relative;z-index:2}
#catalog .subcard__items i{font-style:normal;color:rgba(12,12,12,.36)}
#catalog .subcard__cnt{font-family:var(--f-mono);font-size:12px;color:var(--ink-55);margin-top:auto;padding-top:12px}
#catalog .subcard__img{position:absolute;right:14px;bottom:14px;max-height:62%;max-width:42%;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.18));transition:transform var(--t-med)}
#catalog .subcard:hover .subcard__img{transform:scale(1.06) rotate(-2deg)}
#catalog .subcard__go{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink-16);display:grid;place-items:center;color:var(--ink);transition:all var(--t-med)}
#catalog .subcard:hover .subcard__go{background:var(--cc);border-color:var(--cc);color:#fff;transform:rotate(-45deg)}
#catalog .pd-highlights{background:var(--paper);border:1.5px solid var(--ink-16);border-radius:16px;padding:16px 18px;margin-top:8px}
#catalog .pd-highlights h4{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-55);margin:0 0 12px}
#catalog .pd-highlights ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#catalog .pd-highlights li{display:flex;gap:10px;font-size:14px;line-height:1.4;align-items:flex-start}
#catalog .pd-highlights li svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px;color:var(--cat,var(--acid-deep))}
#catalog .pd-benefits{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
#catalog .pd-benefit{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:999px;
 padding:8px 14px;font-family:var(--f-disp);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;background:#fff}
#catalog .pd-benefit svg{width:15px;height:15px;color:var(--cat,var(--ink))}
#catalog .tabs{margin-top:56px}
#catalog .tabs__nav{display:flex;gap:6px;border-bottom:1.5px solid var(--ink-16);flex-wrap:wrap}
#catalog .tabs__btn{border:0;background:none;font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:14px;
 padding:12px 10px;cursor:pointer;color:var(--ink-55);border-bottom:3px solid transparent;margin-bottom:-1.5px;transition:color .15s}
#catalog .tabs__btn:hover{color:var(--ink)}
#catalog .tabs__btn.is-active{color:var(--ink);border-bottom-color:var(--acid-deep)}
#catalog .tabs__panel{display:none;padding-top:26px}
#catalog .tabs__panel.is-active{display:block}
#catalog .tabs__panel .specs{max-width:640px}
#catalog .upsell{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 14px;border:1.5px solid var(--ink);
 border-radius:16px;background:linear-gradient(180deg,#fffdf3,#fff);text-decoration:none;color:var(--ink);
 box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
#catalog .upsell:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
#catalog .upsell img{width:56px;height:56px;object-fit:contain;flex:0 0 auto}
#catalog .upsell__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
#catalog .upsell__tag{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;
 color:#7a5f00;background:var(--acid);align-self:flex-start;padding:2px 7px;border-radius:6px;border:1px solid var(--ink)}
#catalog .upsell__name{font-family:var(--f-disp);font-weight:800;font-size:13px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
#catalog .upsell__price{font-family:var(--f-disp);font-weight:800;font-size:14px;white-space:nowrap}
#catalog .upsell__go{margin-left:auto;font-size:20px;color:var(--ink-55)}

/* лайк-сердечко (внутренний рейтинг; вместо звёзд) */
#catalog .fh-like{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;align-self:flex-start;font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--ink-55);-webkit-tap-highlight-color:transparent;transition:color .15s}
#catalog .fh-like__ic{width:17px;height:17px;fill:none;stroke:var(--ink-55);stroke-width:2;transition:transform .18s cubic-bezier(.2,.7,.2,1),fill .15s,stroke .15s}
#catalog .fh-like:hover{color:#E63A7E}
#catalog .fh-like:hover .fh-like__ic{stroke:#E63A7E}
#catalog .fh-like.is-liked{color:#E63A7E}
#catalog .fh-like.is-liked .fh-like__ic{fill:#E63A7E;stroke:#E63A7E;transform:scale(1.12)}
#catalog .fh-like:focus-visible{outline:3px solid #E63A7E;outline-offset:3px;border-radius:8px}
#catalog .fh-like .like-n{min-width:6px;font-variant-numeric:tabular-nums}

/* --- Пакет А (08.08): мобильные фиксы каталога/категорий/товара --- */
/* липкое меню подкатегорий: под шапку (было top:64 при шапке 92) */
#catalog .subnav{top:var(--header-h)}
/* текст баннеров не подлезает под фото */
@media(max-width:900px){
  #catalog .cat-banner h2,#catalog .cat-banner__cnt{max-width:56%}
}
/* на мобиле subnav не липкий (6 чипов столбиком закрывали 40% экрана весь скролл) */
@media(max-width:640px){
  #catalog .subnav{position:static;background:var(--paper)}
}
@media(max-width:560px){
  /* герой подкатегории: компактнее + перенос длинных слов (обрезался «БЕСКОНТАКТНО|») */
  #catalog .cat-hero{padding:26px 18px}
  /* размер и защита от разрыва слова — единым блоком в конце файла */
  /* фото в баннере меньше и выше — не лежит на тексте */
  #catalog .cat-banner__img{max-height:42%;top:26%}
  /* таблица характеристик: колонка названий была жёсткие 200px из 328 доступных */
  #catalog .specs tr td:first-child{width:38%}
}
/* одноколоночный режим товара: фото-бокс не квадрат во весь экран (704×704 на планшете) */
@media(max-width:820px){
  #catalog .pd__media{aspect-ratio:auto;min-height:260px;padding:28px}
  #catalog .pd__media img{max-height:340px}
}

/* --- Пакет Б (08.08): 2 компактные колонки товаров на телефоне --- */
@media (max-width: 540px){
  #catalog .fh-card__media{ padding: 10px; }
  #catalog .fh-card__body{ padding: 10px 11px 12px; gap: 5px; }
  #catalog .fh-card__name{ font-size: .82rem; -webkit-line-clamp: 3; }
  #catalog .fh-card__line{ font-size: 11.5px; }
  #catalog .fh-card__price b{ font-size: 1.02rem; }
}

/* --- Пакет Б (08.08): «нравится» — вся зона кнопка ≥40px (было: только сердечко 29×17, слово — пустышка) --- */
#catalog .fh-like{ min-height: 40px; padding: 8px 10px; margin: -8px -10px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 10px; }
#catalog .fh-like__word{ font-family: var(--f-mono, monospace); font-size: 12px; color: var(--ink-55); }
/* --- Пакет Б: дыры на карточке товара на мобиле (десктопные отступы 56-64px без мобильных) --- */
@media (max-width: 640px){
  #catalog .tabs{ margin-top: 28px; }
  #catalog .pd-sec{ margin-top: 36px; }
  /* крошка «Каталог» — тап-зона (была 16px высотой) */
  #catalog .crumbs a{ display: inline-block; padding: 8px 2px; }
}

/* ============================================================
   РЕДИЗАЙН КАТАЛОГА 09.08.2026 (финальный макет владельца):
   карточка = латин-имя + дескриптор + чипы + плашка аромата;
   ховер = язык главной (.cover): glow вместо прыжка с офсет-тенью;
   товар: галерея-миниатюры слева, фасовки, двухколонник, лайтбокс.
   Блок ниже сознательно переопределяет старые правила fh-card/pd.
   ============================================================ */

/* --- карточка листинга --- */
#catalog .fh-card{transition:border-color .3s ease,box-shadow .5s ease}
#catalog .fh-card:hover{transform:none;border-color:var(--ink);
  box-shadow:0 18px 40px -18px rgba(12,12,12,.28);
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--cat) 55%,transparent),0 4px 14px -6px rgba(12,12,12,.10)}
#catalog .fh-card__media{background:#fff;border-bottom:0;position:relative}
#catalog .fh-card__media::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 50% 96%,color-mix(in srgb,var(--cat) 14%,#fff) 0%,transparent 60%);
  opacity:0;transition:opacity .5s ease}
#catalog .fh-card:hover .fh-card__media::before{opacity:1}
#catalog .fh-card__media img{position:relative;z-index:1;transform-origin:50% 100%;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#catalog .fh-card:hover .fh-card__media img{transform:scale(1.06) rotate(-2deg)}
@media(prefers-reduced-motion:reduce){
  #catalog .fh-card,#catalog .fh-card__media img,#catalog .fh-card__media::before{transition:none}
  #catalog .fh-card:hover .fh-card__media img{transform:none}
}
#catalog .fh-badge--new{background:var(--ink);color:#fff}
#catalog .prod-ph-note{color:var(--ink-16);font-family:var(--f-mono);font-size:12px}
#catalog .fh-card__line{font-size:12.5px;line-height:1.35;color:var(--ink-55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
#catalog .fh-card__chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
#catalog .fh-card__chips span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--ink-16);border-radius:999px;padding:3px 9px}
#catalog .fh-card__scent{--sh:26px;height:var(--sh);flex:none;display:grid;place-items:center;
  font-family:var(--f-disp);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
#catalog .fh-card__scent.is-empty{background:transparent}
/* лайк-пилюля на фото (анимация нажатия — сердце «бьётся») */
#catalog .fh-like--card{position:absolute;top:10px;right:10px;z-index:3;background:rgba(255,255,255,.88);
  border-radius:999px;padding:4px 10px;font-family:var(--f-mono);font-size:11px}
#catalog .fh-like .fh-like__ic{transition:transform .22s cubic-bezier(.3,1.8,.5,1)}
#catalog .fh-like.is-liked .fh-like__ic{transform:scale(1.25);animation:fhLikePop .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes fhLikePop{0%{transform:scale(.6)}55%{transform:scale(1.4)}100%{transform:scale(1.25)}}

/* --- subnav и фильтры: актив без офсет-тени --- */
#catalog .subnav a{transition:border-color .25s ease,background .25s ease}
#catalog .subnav a.is-active{box-shadow:none}
#catalog .subnav a:not(.is-active):hover{border-color:var(--ink);background:#fff}
#catalog .cat-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 18px}
#catalog .cat-count{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55)}
#catalog .cat-filters{display:flex;gap:8px;flex-wrap:wrap}
#catalog .f-chip{font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;
  background:#fff;border:1.5px solid var(--ink-16);border-radius:999px;padding:8px 15px;color:var(--ink);
  cursor:pointer;transition:border-color .25s ease,background .25s ease}
#catalog .f-chip:hover{border-color:var(--ink)}
#catalog .f-chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
#catalog .f-select{appearance:none;-webkit-appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230C0C0C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
#catalog .cat-empty{margin:26px 0;font-size:15px;color:var(--ink-55);display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* --- страница товара --- */
#catalog .pd-gal{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start}
#catalog .pd-gal--one{grid-template-columns:1fr}
#catalog .pd-thumbs{display:flex;flex-direction:column;gap:8px}
#catalog .pd-thumb{width:64px;height:64px;border:1.5px solid var(--ink-16);border-radius:10px;background:#fff;
  display:grid;place-items:center;overflow:hidden;cursor:pointer;padding:0;transition:border-color .25s ease}
#catalog .pd-thumb img{max-width:86%;max-height:86%;object-fit:contain}
#catalog .pd-thumb:hover{border-color:var(--ink-55)}
#catalog .pd-thumb.is-on{border-color:var(--ink)}
#catalog .pd__media{cursor:zoom-in;background:#fff}
#catalog .pd__cattop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#catalog .pd__cattop .pd__cat{margin:0}
#catalog .fh-like--inline{font-family:var(--f-mono);font-size:12px}
#catalog .pd__sub{font-family:var(--f-disp);font-weight:700;font-size:1.02rem;text-transform:uppercase;color:rgba(12,12,12,.6);margin-top:-6px}
/* ★ 02.09.2026: описание товара переехало ВНУТРЬ h1 (разметка, вид прежний).
   Вложенным оно теряет сразу три вещи, и каждая заметна глазом:
     * перестаёт быть элементом флекса .pd__info — пропадает зазор 12px,
       поэтому margin-top тут +6px (12 зазора минус прежние -6), а не -6px;
     * span по умолчанию строчный — без display:block описание уедет
       на одну строку с названием бренда;
     * наследует от заголовка letter-spacing .02em и line-height 1.1.
   ★ Два значения выяснены ЗАМЕРОМ в браузере, а не выведены из чтения стилей:
     line-height 1.6 приходит от `body` (я его сперва не нашёл и поставил normal —
     строки встали теснее, владелец заметил глазом); margin-bottom 1em — браузерный
     отступ абзаца, которого у span нет вовсе, из-за чего цена под описанием
     поднялась бы на 16px. Флекс-элемент образует свой контекст, поэтому этот
     нижний отступ не схлопывается наружу и складывается с зазором 12px — ровно
     как было у абзаца;
     text-wrap: заголовки набраны с text-wrap:balance (main.css, правило h1,h2,h3),
     свойство наследуемое — соседний абзац его не получал, а вложенный получает.
     На телефоне 390px это давало 3 строки вместо 4 и блок короче на 26px.
     как было у абзаца.
   Проверено макетом «Заголовок карточки — что меняется»: со всеми шестью
   строками левая и правая колонки неотличимы, без них — расходятся. */
#catalog .pd__name .pd__sub{display:block;margin-top:6px;margin-bottom:1em;letter-spacing:normal;line-height:1.6;text-wrap:wrap}
#catalog .pd__rrc{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40);margin-top:-6px}
#catalog .pd__facts{display:flex;gap:7px;flex-wrap:wrap}
#catalog .pd__pill--soft{border-color:var(--ink-16);font-family:var(--f-mono);font-size:12px;font-weight:600;text-transform:none}
#catalog .pd__pill--link{text-decoration:none;color:var(--ink);cursor:pointer}
#catalog .pd__pill--link:hover{background:var(--acid)}
#catalog .pd-with{border:1.5px solid var(--ink-16);border-radius:16px;background:#fff;padding:2px 14px 4px;margin-top:4px}
#catalog .pd-with__hd{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55);padding:10px 0 4px;margin:0}
#catalog .pd-wrow{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--ink-08);text-decoration:none;color:var(--ink)}
#catalog .pd-wrow:last-child{border-bottom:none}
#catalog .pd-wrow img{width:48px;height:48px;object-fit:contain}
#catalog .pd-wrow__nm{display:block;font-family:var(--f-disp);font-weight:800;font-size:13.5px;text-transform:uppercase;line-height:1.15}
#catalog .pd-wrow__ds{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-55)}
#catalog .pd-wrow__pr{font-family:var(--f-disp);font-weight:800;font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
#catalog .pd-wrow:hover .pd-wrow__nm{text-decoration:underline}
#catalog .pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:56px}
#catalog .pd-cols--one{grid-template-columns:1fr}
#catalog .pd-col{background:#fff;border:1.5px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:18px 22px}
#catalog .pd-col__h{font-family:var(--f-disp);font-weight:800;font-size:1.3rem;text-transform:uppercase;margin:0 0 10px}
#catalog .pd-col .specs{margin:0}
#catalog .specs2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
#catalog .specs2 .rw{display:grid;grid-template-columns:150px 1fr;padding:10px 0;border-bottom:1px solid rgba(12,12,12,.08);align-items:baseline}
#catalog .specs2 .l{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55)}
#catalog .specs2 .v{font-weight:600;font-size:14.5px}
#catalog .dil-table{width:100%;border-collapse:collapse}
#catalog .dil-table td{padding:10px 0;border-bottom:1px solid var(--ink-08)}
#catalog .dil-r{font-family:var(--f-disp);font-weight:700;font-size:1.05rem;width:130px;white-space:nowrap}
#catalog .dil-t{font-size:14px;color:var(--ink-55)}
#catalog .dil-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
#catalog .pd-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(12,12,12,.88);display:grid;place-items:center;cursor:zoom-out}
#catalog .pd-lightbox img{max-width:92vw;max-height:90vh;object-fit:contain}
#catalog .pd-lightbox__x{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;
  background:#fff;color:var(--ink);font-size:22px;cursor:pointer}
#catalog .pd-lightbox[hidden]{display:none}

/* --- мобайл --- */
@media (max-width: 820px){
  #catalog .pd-gal{grid-template-columns:1fr}
  /* ЛЕНТА ВМЕСТО НЕСКОЛЬКИХ РЯДОВ (19.08, решение владельца).
     Замер: 6 миниатюр давали 2 ряда на 320-390, 11 миниатюр — 3 ряда, и название с ценой
     и кнопкой «Купить» уезжали за первый экран (711-838 точек при видимой части 560-670).
     Теперь один ряд со свайпом: освобождает 64 точки при шести кадрах и 128 при одиннадцати.
     ★ flex:0 0 56px обязателен: без него, потеряв право переносить строку, браузер сожмёт
     миниатюры до 40-48 точек и тап-зона станет меньше нормы в 44.
     ★ Отступ сверху 8: у большого фото жёсткая тень со смещением 8 точек вниз, и при
     прежнем зазоре 12 между тенью и лентой оставалось 4 — визуально слипалось.
     ★ padding/margin по 2 — чтобы рамка активного кадра не срезалась краем ленты,
     при этом высота блока не растёт. */
  #catalog .pd-thumbs{
    flex-direction:row; flex-wrap:nowrap; order:2;
    overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scrollbar-width:none;
    padding:2px; margin:8px -2px -2px -2px;
  }
  #catalog .pd-thumbs::-webkit-scrollbar{display:none}
  #catalog .pd-thumb{width:56px;height:56px;flex:0 0 56px;scroll-snap-align:start}
  /* Подсказка «лента продолжается» — только когда кадров шесть и больше, то есть
     лента заведомо не помещается. Уход в фон страницы, без свечений и цвета. */
}
/* Порог подсказки разный по ширине: до 430 не помещаются уже шесть кадров,
   на 430-820 шесть влезают целиком и подсказка была бы враньём — там порог семь. */
@media (max-width: 429px){
  #catalog .pd-thumbs:has(.pd-thumb:nth-child(6)){
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),rgba(0,0,0,.18) 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),rgba(0,0,0,.18) 100%);
  }
}
@media (min-width: 430px) and (max-width: 820px){
  #catalog .pd-thumbs:has(.pd-thumb:nth-child(7)){
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),rgba(0,0,0,.18) 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),rgba(0,0,0,.18) 100%);
  }
}
@media (max-width: 960px){
  #catalog .pd-cols{grid-template-columns:1fr;gap:16px}
  #catalog .specs2{grid-template-columns:1fr}
}
@media (max-width: 640px){
  #catalog .fh-card__scent{--sh:22px;font-size:10px}
  #catalog .fh-like--card{padding:3px 8px;font-size:10px}
  /* 10.08 (владелец): на адаптиве лайк без слова «нравится» — только сердце (+счётчик) */
  #catalog .fh-like__word{display:none}
  #catalog .cat-toolbar{justify-content:flex-start}
}

/* фиксы после первого прогона 09.08 */
#catalog .cat-empty[hidden]{display:none}
#catalog .fh-card__scent{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
#catalog .f-select{max-width:190px}

/* мобильная полировка каталога 09.08 (батч после прогона) */
@media (max-width: 560px){
  #catalog .fh-card__meta{flex-wrap:wrap;row-gap:2px}
  #catalog .fh-card__art{font-size:10.5px}
}

/* 09.08 стандартизация (решения владельца):
   плиты каталога БЕЗ цветных градиентных подложек и БЕЗ цветной ховер-тени —
   чисто тёмные; заголовок страницы категории = канон 48px, вес как у всех;
   единый левый край с остальными страницами */
#catalog .cat-banner__glow, #catalog .cat-hero__glow{ display:none; }
#catalog .cat-banner:hover .cat-banner__go{ background:#fff; border-color:#fff; color:#0C0C0C; }
#catalog .cat-hero h1{ font-size:var(--fs-page-title); font-weight:800; }
#catalog .wrap{ padding-inline:var(--gutter); }

/* ============================================================
   ЛЁГКИЕ ТЕНИ ВМЕСТО ОФСЕТ-ПОДЛОЖЕК (решение владельца 09.08, спека fh-designer):
   мягкая тень в языке fh-card; ховер = тень углубляется + бутылка + стрелка,
   контейнер НЕ сдвигается.
   ============================================================ */
#catalog .cat-banner{
  box-shadow:0 3px 8px rgba(12,12,12,.16), 0 16px 36px -12px rgba(12,12,12,.32);
  transition:box-shadow .5s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
#catalog .cat-banner:hover{
  /* мягкий подъём всей плиты + углубление тени — видимая, но не дёрганая анимация */
  transform:translateY(-6px);
  box-shadow:0 10px 18px rgba(12,12,12,.20), 0 38px 70px -16px rgba(12,12,12,.5);
}
/* заголовок плиты не лезет под бутылку: длинные названия переносятся в 2 строки */
#catalog .cat-banner h2{ max-width:56%; }
#catalog .cat-banner__img{ transition:transform .6s cubic-bezier(.2,.8,.2,1); }

#catalog .subcard{
  box-shadow:0 1px 3px rgba(12,12,12,.06), 0 6px 18px -10px rgba(12,12,12,.14);
  transition:box-shadow .5s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
#catalog .subcard:hover{
  transform:translateY(-4px);
  /* тень единая светло-серая по всему каталогу (решение владельца), без цвета категории */
  box-shadow:0 18px 40px -18px rgba(12,12,12,.28), 0 4px 14px -6px rgba(12,12,12,.10);
}
#catalog .subcard__img{ transform-origin:50% 100%; transition:transform .6s cubic-bezier(.2,.8,.2,1); }

#catalog .cat-hero{ box-shadow:0 3px 8px rgba(12,12,12,.16), 0 16px 36px -12px rgba(12,12,12,.32); }
#catalog .pd-col{ box-shadow:0 1px 2px rgba(12,12,12,.05), 0 4px 14px -8px rgba(12,12,12,.10); }

#catalog .cat-banner__go, #catalog .subcard__go{
  transition:background var(--t-fast), border-color var(--t-fast),
             color var(--t-fast), transform var(--t-med);
}
/* стрелка подкатегории при ховере — чёрная, не цветом категории (решение владельца) */
#catalog .subcard:hover .subcard__go{ background:var(--ink); border-color:var(--ink); color:#fff; }

@media(prefers-reduced-motion:reduce){
  #catalog .cat-banner, #catalog .subcard,
  #catalog .cat-banner__img, #catalog .subcard__img,
  #catalog .cat-banner__go, #catalog .subcard__go{ transition:none; }
  #catalog .cat-banner:hover, #catalog .subcard:hover{ transform:none; }
  #catalog .cat-banner:hover .cat-banner__img{ transform:translateY(-50%) rotate(-3deg); }
  #catalog .subcard:hover .subcard__img{ transform:none; }
  #catalog .cat-banner:hover .cat-banner__go,
  #catalog .subcard:hover .subcard__go{ transform:none; }
}

/* ============================================================
   10.08 — П.3 правок маркетолога: ЦЕЛЬНЫЙ ИНФОБЛОК ТОВАРА
   (идея владельца, спека fh-designer + правки критика).
   Текст слева, карточки данных справа (sticky под шапкой);
   колонки в ритме верхнего блока .pd (1.05fr/1fr, gap 44).
   Брейкпоинт 960, НЕ 820: в полосе 821–960 узкой карточке
   не хватает места под таблицу характеристик (лейбл 200px).
   ============================================================ */
#catalog .pd-body{display:grid;grid-template-columns:1.05fr 1fr;gap:24px 44px;align-items:start;margin-top:56px}
#catalog .pd-body__main{min-width:0}
#catalog .pd-body__side{min-width:0;display:flex;flex-direction:column;gap:24px;position:sticky;top:116px}
#catalog .pd-body--solo{grid-template-columns:1fr}
#catalog .pd-body--solo .pd-body__main{max-width:760px}
#catalog .pd-body .pd-sec{margin-top:0}
#catalog .pd-body .pd-sec+.pd-sec{margin-top:40px}
@media(max-width:960px){
  #catalog .pd-body{grid-template-columns:1fr;gap:28px;margin-top:36px}
  #catalog .pd-body__side{position:static;gap:16px}
  #catalog .pd-body .pd-sec+.pd-sec{margin-top:28px}
}

/* --- 10.08 (владелец): «Работает в связке» / «С этим берут» на адаптиве —
   карусель: 2 карточки в кадре, остальные листаются свайпом со снапом.
   ТОЛЬКО related-блок страницы товара (.pd-sec .prod-grid) — сетку
   подкатегорий (.prod-grid без .pd-sec) не трогаем. --- */
@media (max-width: 640px){
  #catalog .pd-sec .prod-grid{
    display:flex; overflow-x:auto; gap:12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  #catalog .pd-sec .prod-grid::-webkit-scrollbar{display:none}
  #catalog .pd-sec .prod-grid > *{
    flex:0 0 calc(50% - 6px);
    min-width:calc(50% - 6px);
    scroll-snap-align:start;
  }
}

/* SEO-блок категории (текст + вопрос-ответ). Заполняется в CMS; без текста не выводится. */
.cat-seo { margin: 44px 0 8px; max-width: 760px; }
.cat-seo h2 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 28px 0 10px; }
.cat-seo h2:first-child { margin-top: 0; }
.cat-seo p { margin: 0 0 12px; line-height: 1.6; color: var(--ink-72, #3a3a3a); }
.cat-seo ul, .cat-seo ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; color: var(--ink-72, #3a3a3a); }
.cat-seo li { margin-bottom: 6px; }
.cat-faq details { border-top: 1px solid var(--ink-16, rgba(12,12,12,.16)); }
.cat-faq details:last-child { border-bottom: 1px solid var(--ink-16, rgba(12,12,12,.16)); }
.cat-faq summary { cursor: pointer; padding: 14px 28px 14px 0; font-weight: 700; position: relative; list-style: none; }
.cat-faq summary::-webkit-details-marker { display: none; }
.cat-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; line-height: 1; color: var(--ink-55, #6a6a6a); }
.cat-faq details[open] summary::after { content: "−"; }
.cat-faq details > div { padding: 0 0 16px; line-height: 1.6; color: var(--ink-72, #3a3a3a); }

/* 320px: строка имён упиралась в фото. ★ Блок стоит В КОНЦЕ ФАЙЛА намеренно: правило
   `#catalog .subcard__img{max-width:42%}` идёт ниже по файлу и БЕЗ медиазапроса —
   при равной специфичности побеждает порядок, и мой @media выше него не работал
   (поймано замером: computed max-width оставался 42%). Даём тексту чуть больше места
   и слегка ужимаем декоративное фото: строка остаётся в ДВЕ строки, зазор 11px.
   Кегль НЕ уменьшаем — 11px и так на нижней границе. */
@media (max-width:560px){
  #catalog .subcard__items{max-width:54%}
  #catalog .subcard__img{max-width:38%}
}

/* Заголовок категории и подкатегории — та же единая шкала и тот же предохранитель
   от разрыва слова, что и у остальных страниц (см. комментарий в main.css).
   Поле контейнера тут больше (по 35px), это учтено при расчёте --h1cap в render.js. */
#catalog .cat-hero h1{
  /* 20.08: тот же предел 56, что и у остальных заголовков страниц (см. main.css) — иначе
     каталог и категории разъедутся по размеру. */
  font-size: min(clamp(28px, calc(10.9px + 5.33vw), 56px), var(--h1cap, 999px));
  /* 20.08: разрядка -.015em приходила из класса .h-display, которого у заголовка категории
     нет, — «КАТАЛОГ.» был набран плотно, а «МОЙКА И ЭКСТЕРЬЕР» вразрядку при том же кегле
     и весе (замер: -0,72 против обычной). Приводим к одному набору. */
  letter-spacing: -.015em;
  overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual;
}

/* ===== МЕЛКИЙ ТЕКСТ КАТАЛОГА (19.08, вариант «В») — см. комментарий в main.css =====
   Правка владельца: аромат и артикул — 12, НЕ 14. Артикул покупателю не нужен, а аромат
   на 14 перестаёт влезать в плашку (замер: «черника, малина и зеленое яблоко» = 296 точек
   при плашке 172). Когда даже на 12 не влезает — обрезаем многоточием, оно уже включено
   ниже в .fh-card__scent (white-space:nowrap + text-overflow:ellipsis). */

/* ★ РАЗМЕРЫ — ТОЛЬКО ТЕЛЕФОН (владелец 19.08: «мы же только адаптив меняли»).
   Компьютер остаётся как был. Ниже, без медиазапроса, — то, что является
   исправлением ОШИБКИ и нужно везде: контраст, многоточие, выравнивание. */
@media (max-width: 620px) {
  #catalog .fh-card__scent{ font-size: 11px; }
  #catalog .fh-card__art{ font-size: 12px; }
  #catalog .fh-card__name{ font-size: 14px; line-height: 1.2; }
  #catalog .fh-card__line{ font-size: 14px; line-height: 1.35; }
  /* 19.08: на 320 колонка карточки — 115 точек, а слова «пенообразователь» (127),
     «химостойкий» (126), «эмульсионный» (136) шире неё целиком. Обрезка стояла clip,
     без многоточия, поэтому слово просто упиралось в край и выглядело поломкой.
     break-word (а не anywhere и не дефисные переносы, которых владелец не принимает)
     рвёт ТОЛЬКО то, что физически не помещается, — на 360 и шире не срабатывает вовсе.
     Кегль не трогаем: он из общей шкалы мелкого текста. */
  #catalog .fh-card__name, #catalog .fh-card__line{ overflow-wrap: break-word; }
  #catalog .fh-card__size, #catalog .fh-card__rcnt, #catalog .fh-card__rnum{ font-size: 12px; }
  #catalog .fh-badge{ font-size: 12px; }
  #catalog .cat-banner__num, #catalog .cat-banner__cnt,
#catalog .cat-hero__num, #catalog .subcard__num{ font-size: 12px; line-height: 1.35; }
  /* 19.08 (просьба владельца): подпись под названием категории держалась общего кегля 17
     и на телефоне выходила больше половины самого названия (17 против 31,7). Это служебная
     строка — ей ступень 14 из общей шкалы мелкого текста. На компьютере остаётся 17. */
  /* ★ :not(.cat-hero__num) обязательно: номер над названием — это тоже <p>, и селектор
     с тегом оказался сильнее правила `.cat-hero__num{font-size:12px}` строкой выше —
     номер молча вырос с 12 до 14 (поймано замером до выкладки). */
  #catalog .cat-hero p:not(.cat-hero__num){ font-size: 14px; line-height: 1.45; }
  #catalog .subcard__items{ font-size: 12px; line-height: 1.4; }
  #catalog .cat-chip, #catalog .chip{ font-size: 12px; }
  #catalog .specs td:first-child{ font-size: 12px; line-height: 1.35; }
  #catalog .specs td:last-child{ font-size: 14px; line-height: 1.35; }
  #catalog .pd__pill, #catalog .pd__rrc, #catalog .pd-with__hd,
#catalog .pd-wrow__ds{ font-size: 12px; line-height: 1.35; }
  #catalog .pd-wrow__nm{ font-size: 14px; }
  #catalog .pd-wrow__pr{ font-size: 15px; }
  #catalog .buy-btn, #catalog .btn{ font-size: 14px; }
  #catalog .fh-card__chips > *{ font-size: 12px; }
  #catalog .subnav a, #catalog .f-chip, #catalog .back,
#catalog .buy-note{ font-size: 14px; line-height: 1.35; }
  #catalog .specs2 .l, #catalog .tr > *{ font-size: 12px; line-height: 1.35; }
  #catalog .fh-card__chips span{ font-size: 12px; }
  .fh-card__chips span{ font-size: 12px; }
  #catalog .tr > *, .tr > *{ font-size: 12px; line-height: 1.35; }
  #catalog .cat-banner__subs span, #catalog .cat-banner__subs a{ font-size: 12px; }
  #catalog h4{ font-size: 12px; line-height: 1.35; }
  #catalog .pd-highlights h4{ font-size: 12px; }
  #catalog .specs tr td:first-child{ font-size: 12px; line-height: 1.45; }
  #catalog .specs tr td:last-child{ line-height: 1.45; }
}

#catalog .specs td{ vertical-align: baseline; }
#catalog .cat-banner__subs span, #catalog .cat-banner__subs a{ padding-left: 8px; padding-right: 8px; }
/* высота строки = высоте плашки: так текст стоит по центру и работает многоточие */
/* ★ 20.08. Тут стояло line-height:26px числом, и это правило (без медиазапроса,
   в конце файла) перебивало мобильный блок: на телефоне плашка 22, а строка 26 —
   текст садился на 1,5 точки ниже центра, и 4 точки строки уходили под обрез.
   Замер до правки: сверху 5, снизу 2. Теперь высота плашки и высота строки — одна
   переменная --sh, разъехаться они больше не могут. Кегль на телефоне 12 -> 11
   (просьба владельца), компьютер не трогаем — там 11 и перекоса не было. */
#catalog .fh-card__scent{ display: block; line-height: var(--sh); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#catalog .subcard__items .nb{ white-space: nowrap; }
#catalog .cat-banner__subs span, #catalog .cat-banner__subs a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ЗНАК РУБЛЯ (19.08, выбор владельца — вариант «В» с уточнением «знак будто толще»).
   Было: на странице товара ₽ был 0,54 от числа, в плитке — 0,93, и всегда серый 62% —
   знак читался как отвалившаяся приписка, а правило в двух местах было разное.
   Стало: единая доля 0,8 от числа и цвет числа. Вес 500, а не 800: замер плотности
   чернил показал у знака 0,564 против 0,571 у цифр — формально одинаково, но глиф ₽
   компактный, и при том же весе он выглядит жирнее. 500 выравнивает это на глаз.
   (Замер делался на Gotham Pro; с 19.08 заголовочный шрифт — Wix Madefor Display,
   вес 500 у знака оставлен: на глаз он и здесь уравнивает знак с цифрами.) */
/* ЗНАК РУБЛЯ — вариант «А» из макета (выбор владельца 19.08): цвет числа, две трети
   от его размера, вес как у цифр. Путь к этому был длинный: пробовал 0,8 (казался
   массивным), потом средний вес (знак «сдулся»), потом «как в портале» — одним куском.
   Владелец выбрал ровно то, что видел на макете: ⅔ и чёрный.
   Размер задан в em и знак стоит ВНУТРИ <b> с ценой — доля держится на всех экранах сама. */
#catalog .pd__price .fh-rub,
#catalog .fh-card__price .fh-rub{ color: inherit; font-family: inherit; font-weight: inherit;
  font-size: .66em; letter-spacing: 0; }

/* ===== ЗАГОЛОВОЧНЫЙ ШРИФТ: Wix Madefor Display (19.08, решение владельца) =====
   Ушли с Gotham Pro: наши файлы — неофициальная кириллизация с копирайтом Hoefler,
   веб-лицензию в России купить негде. Wix Madefor Display — свободная лицензия (OFL).
   ★ catalog.css и journal.css подключаются ПОСЛЕ main.css и переопределяют --f-disp
   своими значениями, поэтому этот блок дописан во ВСЕ ТРИ файла — иначе сменился бы
   только заголовок страницы, а плитки, цены и статьи остались бы на старом шрифте. */
:root,#catalog,#journal{--f-disp:"Wix Madefor Display",system-ui,sans-serif;--disp:"Wix Madefor Display",system-ui,sans-serif}
.h-display,h1,h2,h3,h4,
#catalog .fh-card__name,#catalog .fh-card__price b,#catalog .pd__name,#catalog .pd__price,
#catalog .pd__price b,#catalog .cat-hero h1,#catalog .cat-banner h2,#catalog .pd-col__h,
#catalog .subcard__title,
#journal .article-title,#journal .featured-body h3,#journal .card-body h3,#journal .prose h2,
#journal .prose .pull{font-family:"Wix Madefor Display",system-ui,sans-serif}

/* Воздух в крупных заголовках: у Wix прописная выше при том же кегле, при интервале
   1,05 строки слипались. Перечислены и те заголовки, у кого был свой жёсткий межстрочный
   с более сильным селектором, — иначе правка их не достаёт. */
.h-display,h1,h2,h3,
#catalog .cat-hero h1,#catalog .cat-banner h2,#catalog .subcard__title,
#journal .article-title,#journal .featured-body h3,
.cat-row-title,.cover-title,.jr-featured-title,.jr-article-title,.fh-hero-name,
#wtb .title,#wtb .block-title,#wtb .sec-h,#wtb .cv-h,#wtb .cta h2,#wtb .opt-title,
#wtb .opt-banner-txt h3{line-height:1.12}

/* ===== УЗКИЕ ЭКРАНЫ 320/360 (19.08) =====
   Замер на живом сайте: у плитки «Оборудование и Инструмент» на 320 заголовок требует
   248 точек, а его коробка — 118 (ограничение max-width:56% из правила для ≤900).
   Слово не переносится и наезжало на фото. Но на ≤560 фото уже поднято наверх
   (`.cat-banner__img{top:26%}`), место под заголовком свободно — значит ограничение
   56% там просто устарело. Даём 90% и потолок кегля по ширине экрана: на 320 это 19
   точек, самое длинное слово занимает 173 при доступных 192. */
@media (max-width: 560px) {
}
/* Карточка подкатегории: «Бесконтактная мойка» не влезала в 66% (нужно 170 при 159).
   Ниже 400 точек расширяем до 82% — на фото не наезжает, слово целое. */
@media (max-width: 400px) {
  #catalog .subcard__title { max-width: 82%; }
}

/* Названия товаров — трекинг под Wix (см. пояснение в main.css).
   У карточки каталога было -.01em, ставим +.01em: суммарно те же +0,02em. */
#catalog .fh-card__name{ letter-spacing: .01em; }
#catalog .pd__name{ letter-spacing: .02em; }

/* ===== ЕДИНИЦЫ ИЗМЕРЕНИЯ НЕ КАПСОМ (19.08, владелец) =====
   Заголовки и плашки набраны прописными через text-transform, и фасовка вместе с ними
   превращалась в «500МЛ», «3Л», «PH 13.5». Отменяем капс точечно — там, где стоит
   величина с единицей: в H1 товара, в списке других фасовок и в плашках карточки.
   Регистр берётся из исходных данных, поэтому «мл», «л», «pH» пишутся как положено. */
/* ★ :not(.pd__sub) добавлен 02.09.2026. Описание товара переехало внутрь h1 и
   получило translate="yes" — и попало под это правило, задуманное для фасовки:
   «СТИКЕР ВОДОСТОЙКИЙ» стало «стикер водостойкий». На макете этого не было видно,
   там у описания не было атрибута translate. Специфичности нового правила не
   хватает, чтобы перебить: чинится только здесь, отсевом. */
#catalog .pd__name span[translate="yes"]:not(.pd__sub),
#catalog .pd-wrow__nm .unit,
#catalog .fh-card__chips span{ text-transform: none; }

/* ===== СТРАНИЦА ТОВАРА: ДВЕ САМОСТОЯТЕЛЬНЫЕ КОЛОНКИ (19.08, вариант А) =====
   Было: шапка — сетка из двух ячеек, следующая секция начиналась после самой высокой.
   Замер по 60 товарам: у 61% под фото висела пустота, в среднем 199 точек там, где есть
   «другие фасовки», и до 332 у товара с одиннадцатью кадрами. Теперь колонки не равняются
   друг на друга: слева фото → описание → рекомендации, справа цена → разведение → характеристики. */
/* ★ ТОЛЬКО для двухколоночной раскладки: без медиазапроса это правило доставало и телефон,
   где блоки идут в одну колонку, и характеристики переставали растягиваться по ширине. */
@media (min-width: 821px){ #catalog .pd--flow{align-items:start} }
/* ★ 19.08 (владелец: «вроде правые блочки ехали вниз»): характеристики и правда ехали —
   раньше они жили в одной секции с описанием и залипали под шапкой, пока читаешь текст.
   После перехода на самостоятельные колонки блок остался sticky, но ехать стало НЕКУДА:
   при `align-items:start` правая колонка равна своему содержимому (замер: 916 против 1504
   слева), и путь залипания почти нулевой. Возвращаем правой колонке полную высоту строки —
   раскладку это не меняет (пустота под колонкой невидима, фона у неё нет), зато блоку снова
   есть куда ехать: на fha027 путь вырос с 0 до ~590 точек. */
@media (min-width: 821px){ #catalog .pd--flow > .pd__col:last-child{ align-self: stretch; } }
#catalog .pd--flow .pd__col{display:flex;flex-direction:column;gap:56px;min-width:0}
#catalog .pd--flow .pd-body__main{min-width:0}
#catalog .pd--flow .pd-body__side{min-width:0;display:flex;flex-direction:column;gap:24px;position:sticky;top:116px}
#catalog .pd--flow .pd-sec{margin-top:0}
#catalog .pd--flow .pd-body__main .pd-sec+.pd-sec{margin-top:40px}

/* Миниатюры остаются в обычном потоке: фиксированная ширина полосы 64, кадр 64,
   ничего не зависит от ширины окна. Если кадров больше, чем помещается по высоте фото,
   лишние просто продолжают столбик — решение по стрелкам/«+N» на согласовании. */

/* Телефон: порядок блоков прежний — фото, цена с кнопками, описание, характеристики.
   display:contents убирает обёртки колонок, а order расставляет блоки как раньше. */
@media (max-width: 820px){
  #catalog .pd--flow{display:flex;flex-direction:column;gap:26px;align-items:stretch}
  #catalog .pd--flow .pd__col{display:contents}
  #catalog .pd--flow .pd-gal{order:1}
  #catalog .pd--flow .pd__info{order:2}
  #catalog .pd--flow .pd-body__main{order:3}
  #catalog .pd--flow .pd-body__side{order:4;position:static}
  #catalog .pd--flow .pd-body__main .pd-sec+.pd-sec{margin-top:28px}
}

/* ===== ПАРТИЯ ПРАВОК 19.08 (замечания владельца) =====
   «Назад в раздел» на компьютере дублирует крошки — там путь и так виден и кликабелен.
   На телефоне кнопку оставляем: крошки мелкие, попасть пальцем сложно. */
@media (min-width: 821px){
  #catalog .back{ display: none; }
}

/* Подпись в карточке подкатегории была крупнее и просторнее заголовка: 12/1,4 против 17,9/1,12.
   Служебная строка не должна спорить с названием — уменьшаем кегль и поджимаем межстрочный. */
#catalog .subcard__items{ font-size: 12px; line-height: 1.3; }

/* Название подкатегории упиралось в фото и не переносилось, хотя место под ним свободно.
   Ограничиваем ширину до края фото — тогда длинное название спокойно уходит на вторую строку. */
#catalog .subcard__title{ max-width: calc(100% - 104px); }
@media (max-width: 400px){
  #catalog .subcard__title{ max-width: calc(100% - 92px); }
}

/* ===== ПЛИТКА КАТЕГОРИИ НА ТЕЛЕФОНЕ: ВЕРНУЛИ КАК БЫЛО ДО 19.08 (решение владельца 20.08) =====
   19.08 фото ужали и подняли под стрелку, а заголовку урезали ширину — чтобы у «Мойка и
   Экстерьер» название не заходило на канистру. Владелец посмотрел все варианты макетом
   («Макеты (Claude)/Плитка каталога на телефоне») и выбрал прежний вид: крупное фото 44%
   ширины справа сверху, заголовок 27,2 в две строки, чипы по одному в строке.
   ★ ИЗВЕСТНАЯ ПЛАТА ЗА ЭТО: у длинных названий («Мойка и Экстерьер», «Оборудование и
   Инструмент») последнее слово заходит на фото. Владелец это видел на кадре и принял.
   НЕ «чинить» снова без его прямой просьбы — блок правился уже трижды. */


/* ЗАГОЛОВОК ПЛИТКИ НА КОМПЬЮТЕРЕ (19.08): при 1440 строка доходила до 442 точки,
   а фото начинается с 433 — буквы упирались в канистру. Оставляем заголовку половину
   плитки: длинное название спокойно уходит на вторую строку, как и было задумано. */
@media (min-width: 901px){
}

/* ===== ЛИСТАНИЕ В УВЕЛИЧЕННОМ ПРОСМОТРЕ (19.08, владелец: «а где прокрутки зума?») =====
   Стрелки по краям, счётчик кадров снизу. Тап-зона 56 — с запасом к норме 44.
   У товара с одним кадром стрелки и счётчик скрывает скрипт. */
#catalog .pd-lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border:0;border-radius:50%;
  background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;z-index:2;
  display:grid;place-items:center;
}
#catalog .pd-lightbox__nav--prev{left:14px}
#catalog .pd-lightbox__nav--next{right:14px}
#catalog .pd-lightbox__nav:hover{background:var(--acid)}
#catalog .pd-lightbox__nav[hidden]{display:none}
#catalog .pd-lightbox__cnt{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:#fff;
  /* ★ кадры часто сняты на белом фоне, и белые цифры на нём пропадали —
     поэтому счётчик сидит на тёмной пилюле, а не просто лежит поверх снимка */
  background:rgba(12,12,12,.72);border-radius:999px;padding:6px 14px;
}
@media (max-width: 620px){
  #catalog .pd-lightbox__nav{width:48px;height:48px;font-size:19px}
  #catalog .pd-lightbox__nav--prev{left:8px}
  #catalog .pd-lightbox__nav--next{right:8px}
  #catalog .pd-lightbox img{max-width:88vw}
}

/* ===== ВАРИАНТ В: ПЛИТКА «+N» И ЛЕНТА ПРЕВЬЮ В КРУПНОМ ПРОСМОТРЕ (19.08) =====
   В столбике всегда 6 кадров и седьмая ячейка со счётчиком остатка — раскладка
   одинаковая на любой ширине окна, размеры не плавают. Нажатие открывает крупный
   просмотр сразу на седьмом кадре, а под ним лента превью со всеми кадрами. */
#catalog .pd-gal--many .pd-thumb:nth-of-type(n+7){ display: none; }
#catalog .pd-gal--many .pd-thumbs .pd-more{
  display: grid; place-items: center; font-family: var(--f-disp); font-weight: 800;
  font-size: 17px; color: var(--ink); background: #fff;
}
#catalog .pd-gal--many .pd-thumbs .pd-more:hover{ border-color: var(--ink); }

/* Лента превью под большим кадром. Плитка 56 — тап-зона с запасом к норме 44. */
#catalog .pd-lb-film{
  position: absolute; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px; justify-content: center; overflow-x: auto; padding: 0 16px;
  scrollbar-width: none; z-index: 2;
}
#catalog .pd-lb-film::-webkit-scrollbar{ display: none; }
#catalog .pd-lb-mini{
  flex: 0 0 56px; width: 56px; height: 56px; padding: 0; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(255,255,255,.35); border-radius: 10px;
  display: grid; place-items: center; overflow: hidden;
}
/* .pd-lb-film в селекторе поднимает специфичность до (1,2,1): иначе правила
   `#catalog .pd-lightbox img` (та же (1,1,1), но ПОЗЖЕ в файле) перебивали
   max-width мини — картинка рисовалась в 107px внутри ячейки 56px, и было видно
   только белый центр кадра (баг «белые квадраты миниатюр в просмотрщике»). */
#catalog .pd-lb-film .pd-lb-mini img{ max-width: 86%; max-height: 86%; object-fit: contain; }
#catalog .pd-lb-mini.is-on{ border-color: var(--acid); }
/* Большой кадр не должен лежать на ленте — оставляем ей место снизу. */
#catalog .pd-lightbox img{ max-height: 72vh; }
#catalog .pd-lightbox__cnt{ bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 620px){
  #catalog .pd-lb-film{ justify-content: flex-start; }
  #catalog .pd-lightbox img{ max-height: 64vh; }
}

/* ===== СТРЕЛКИ РЯДОМ С КАДРОМ, А НЕ ПО КРАЯМ ЭКРАНА (19.08, замечание владельца) =====
   Было position:absolute с привязкой к краям окна — на широком мониторе стрелки уезжали
   от фотографии на пол-экрана. Теперь на компьютере просмотр — это ряд «стрелка · кадр ·
   стрелка», и они всегда держатся снимка. На телефоне оставляем прижатыми к краям:
   там экран узкий, и в ряд они отняли бы у фото 112 точек. */
@media (min-width: 821px){
  #catalog .pd-lightbox{ display:flex; align-items:center; justify-content:center; gap:22px; }
  #catalog .pd-lightbox__nav{ position:static; transform:none; flex:0 0 56px; }
  #catalog .pd-lightbox img{ max-width:min(78vw, 900px); }
}

/* =====================================================================
   ПЛИТКА КАТЕГОРИИ НА ТЕЛЕФОНЕ — НОВАЯ РАСКЛАДКА (20.08, итог разбора)
   Три дизайнера (адаптивный, iOS, Android) предложили компоновку независимо,
   критик перепроверил замерами и свёл. Подкатегории с телефона убраны по
   решению владельца, стрелка тоже убрана («вся плитка и так ссылка»).
   Замер до/после на 390: плитка 326 -> 131, страница 2819 -> 1806,
   прокрутка 3,34 -> 2,14 экрана, товар занимает 61% высоты плитки вместо 29%.
   ★ Кегль названия НЕ пострадал: 27,15 против 27,2 — сегодняшний размер держался
   только потому, что буквы заходили на бутылку (замер: наезд до 52 точек на 390,
   на 320 — во всех пяти плитках до 116). Теперь наездов ноль.
   ★ Компьютер не затронут: всё внутри @media (max-width: 640px), проверено на
   641/768/1024/1440 — совпадение с боевым до точки.
   ===================================================================== */
/* ===== ПЛИТКА КАТЕГОРИИ НА ТЕЛЕФОНЕ (<=640) =====
   Подкатегории убраны (решение владельца). Плитка из постера 320-400 точек
   становится горизонтальной карточкой ~131-146. Текст и фото разведены по
   разным колонкам сетки, поэтому буквы физически не могут попасть на товар.
   Кадр товара квадратный с прозрачными полями по краям (замер: у самого
   "широкого" товара каталога видимая часть 66% кадра, у самого узкого 30%).
   Колонка под фото шириной 0.73 кадра = ровно видимая часть плюс запас,
   а сам кадр сдвинут вправо на 0.12 своей стороны: прозрачное поле уходит
   за край плитки, товар встаёт к краю. Ничего не обрезается: 0.12 < 0.17.  */
@media (max-width: 640px){

  #catalog .cat-banners{ gap: 14px; }
  #catalog .cat-banner__subs{ display: none; }

  #catalog .cat-banner,
  #catalog .cat-banner.cb--wide{
    --ph:   min(30vw, 136px);              /* сторона квадратного кадра    */
    --lane: calc(var(--ph) * .73);         /* колонка под фото             */
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lane);
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: 8px;
    row-gap: 0;
    padding: 16px 8px 18px 16px;
    min-height: calc(var(--ph) + 14px);
    -webkit-tap-highlight-color: transparent;
  }

  #catalog .cat-banner__num{
    position: static; grid-column: 1; grid-row: 1;
    margin: 0 0 5px;
  }

  /* Кегль задан ТОЛЬКО от ширины экрана, без rem: при системном увеличении
     шрифта он не растёт. Иначе слово "ОБОРУДОВАНИЕ" (самое длинное в каталоге,
     9,12 точки ширины на 1 точку кегля) перестанет помещаться в строку, а
     переносы по буквам владелец не принимает. Потолок 2rem — для планшетной
     полосы 560-640. */
  #catalog .cat-banner h2{
    grid-column: 1; grid-row: 2;
    max-width: none; margin: 0;
    font-size: min(calc(8.5vw - 6px), 2rem);
  }

  #catalog .cat-banner__cnt{
    grid-column: 1; grid-row: 3;
    max-width: none; margin: 5px 0 0;
    white-space: nowrap;
  }


  /* ===== ПОДКАТЕГОРИИ ВЕРНУЛИСЬ (20.08, решение владельца) =====
     Убирали их вместе со стрелкой, но освободившееся место позволило вернуть.
     Ключевое: НЕ в столбик, как было раньше (плитка снова стала бы 230-260), а строкой
     с переносом — раскладка пересобирается под ширину экрана сама: на 320 выходит четыре
     ряда, на 390 три, на 430 два. Короткие названия встают парами, длинное «Воски, кварцы
     и быстрые блески» занимает свою строку. Кегль 10,5 — это подпись-подсказка, а не текст
     для чтения. Замер: плитка 131 -> 238, страница 1806 -> 2223 (2,14 -> 2,63 экрана);
     против прежней версии всё равно на 21% короче (было 2819).
     ★ Отступ справа стоит НА СТРОКЕ ЧИПОВ, а не на плитке: если задать плитке, сузится
     колонка заголовка и «ЗАЩИТА ПОВЕРХНОСТЕЙ» обрежется (поймано замером). */
#catalog .cat-banner{ grid-template-rows: auto auto auto auto; min-height: 0; }
  #catalog .cat-banner__img{
    grid-column: 2; grid-row: 1 / 4; position: static;
    justify-self: end; align-self: center;
    /* ★ 20.08, ИСПРАВЛЕНИЕ: было height: var(--ph) — кадр оказывался ВЫШЕ отведённой ему
       зоны (номер + название + счётчик), центрировался и вылезал за верх плитки, где его
       срезало (замер на боевом: подрезано на 48 точек, канистра без горлышка). Теперь
       высота берётся от самой зоны, а ширина — сколько нужно кадру. */
    /* высота = сторона кадра, как в раскладке без подкатегорий: иначе кадр вписывается
       в невысокую зону над чипами и превращается в иконку 43x105 (проверено). */
    width: var(--ph); height: var(--ph); max-width: none; max-height: none;
    object-fit: contain; transform: rotate(-3deg);
    margin-right: calc(var(--ph) * -0.12);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
  }
  #catalog .cat-banner__subs{
    display: flex !important; grid-column: 1 / -1; grid-row: 4;
    flex-wrap: wrap; column-gap: 5px; row-gap: 8px; margin: 9px 12px 0 0; max-width: none;
  }
  #catalog .cat-banner__subs span, #catalog .cat-banner__subs a{
    font-size: 10.5px !important; padding: 5px 8px !important;
    white-space: nowrap; flex: 0 1 auto; min-width: 0;
  }

  /* ★ Стрелка с телефона убрана (решение владельца 20.08): вся плитка и так ссылка,
     а в новой раскладке кружок в углу ложился бы на товар во всех пяти плитках. */
  #catalog .cat-banner__go{ display: none; }

  /* ★ 20.08: тут было ВТОРОЕ правило для фото — с `top:50%` и `translateY(-50%)`.
     Оно осталось от раскладки без подкатегорий, где кадр стоял абсолютом. После возврата
     подкатегорий фото переехало в колонку сетки (position:static), «top» перестал
     действовать, а сдвиг на половину высоты остался — кадр уезжал вверх и срезался
     краем плитки на 48 точек. Правило удалено, всё описано выше одним блоком;
     тень перенесена туда же. */

  /* На пальцах :hover залипает после тапа — гасим и отдаём отклик на нажатие */
  @media (hover: none){
    #catalog .cat-banner{ transition: transform .18s ease, box-shadow .5s ease; }
    #catalog .cat-banner:hover{ transform: none; }
    /* ★ 20.08: было translateY(-50%) — остаток раскладки, где кадр стоял абсолютом.
       При касании плитки фото прыгало вверх и срезалось краем. Оставляем только наклон. */
    #catalog .cat-banner:hover .cat-banner__img{ transform: rotate(-3deg); }
    #catalog .cat-banner:hover .cat-banner__go{
      background: transparent; border-color: rgba(255,255,255,.4);
      color: #fff; transform: none;
    }
    #catalog .cat-banner:active{ transform: scale(.985); }
  }
}


/* ===================================================================
   ПОДКАТЕГОРИИ В ПЛИТКЕ — КЛИКАБЕЛЬНЫЕ (20.08, макет согласован владельцем)
   Плитка больше НЕ <a> целиком: ссылка в ссылке невалидна. Ссылка на
   категорию — заголовок, нажимаемой остаётся вся плитка через ::after.
   Слой лежит ВЫШЕ текста (z-index:1) и НИЖЕ чипов (z-index:2): чипы
   перехватывают нажатие первыми, промах мимо чипа проваливается в
   категорию — тупика нет.
   Замеры на боевом (390x844): цель 28,8 точки, страница 2285 против
   2223 сегодня (+62, 2,63 -> 2,71 экрана).
   =================================================================== */
#catalog .cat-banner{ cursor: pointer; }
#catalog .cat-banner h2{ position: static; }
#catalog .cat-banner__link{ position: static; color: inherit; text-decoration: none; cursor: pointer; }
#catalog .cat-banner__link::after{ content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; }

/* клавиатура: обводка внутрь — у плитки overflow:hidden срежет наружную */
#catalog .cat-banner__link:focus-visible{ outline: none; }
#catalog .cat-banner__link:focus-visible::after{
  outline: 2px solid var(--acid); outline-offset: -4px; border-radius: 20px;
}

/* Признак кликабельности, видимый и там, где ховера не бывает: волосок
   читается как подпись, залитая плашка — как объект, который нажимают.
   Размер не меняется ни на точку — заливка и цвет рамки, больше ничего. */
#catalog .cat-banner__sub{
  position: relative; z-index: 2;
  display: inline-block; text-decoration: none; cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.34);
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
#catalog .cat-banner__sub:focus-visible{ outline: 2px solid var(--acid); outline-offset: 2px; }

@media (hover: hover){
  /* курсор на плитке мимо чипов — всё как раньше, плюс чипы чуть проявляются */
  #catalog .cat-banner:hover .cat-banner__sub{
    background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.46);
  }
  /* курсор на чипе — плитка гасит свои признаки: стрелка в контур, товар ровно.
     ★ Подъём плитки НЕ снимаем: без него плитка уезжает на 6 точек из-под
     курсора, курсор соскакивает с чипа и всё мигает (замер проводкой по
     1 точке через кромку чипа: 6 прыжков на 17 положений; с подъёмом — 0). */
  #catalog .cat-banner:has(.cat-banner__sub:hover) .cat-banner__go{
    background: transparent; border-color: rgba(255,255,255,.4); color: #fff; transform: none;
  }
  #catalog .cat-banner:has(.cat-banner__sub:hover) .cat-banner__img{
    transform: translateY(-50%) rotate(-3deg);
  }
  #catalog .cat-banner:has(.cat-banner__sub:hover) .cat-banner__sub{
    background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34);
  }
  /* сам чип — единственное яркое пятно на чёрной плитке */
  #catalog .cat-banner .cat-banner__sub:hover,
  #catalog .cat-banner:hover .cat-banner__sub:hover{
    background: var(--acid); border-color: var(--acid); color: var(--ink);
    transform: translateY(-1px);
  }
  #catalog .cat-banner .cat-banner__sub:active{
    background: var(--acid-deep); border-color: var(--acid-deep);
    transform: translateY(0) scale(.97);
  }
}

/* Телефон: ховера нет, есть нажатие. У плитки -webkit-tap-highlight-color
   прозрачный, поэтому отклик рисуем сами. Нажали чип — отвечает ТОЛЬКО чип,
   существующее `.cat-banner:active{transform:scale(.985)}` при этом гасится. */
@media (hover: none){
  #catalog .cat-banner:has(.cat-banner__sub:active){ transform: none; }
  #catalog .cat-banner__sub:active{
    background: var(--acid); border-color: var(--acid); color: var(--ink);
    transform: scale(.94);
  }
}

@media (prefers-reduced-motion: reduce){
  #catalog .cat-banner__sub{ transition: none; }
  #catalog .cat-banner .cat-banner__sub:hover,
  #catalog .cat-banner__sub:active{ transform: none; }
}