.catalog-card{position:relative;border-radius:8px}
.catalog-card-media{touch-action:pan-y}
.catalog-card-media-link{position:relative;display:block;width:100%;height:100%;overflow:hidden}

/* Ховер-анимация подсветки товара (Figma «Анимация» `4890:14725`, кадры
   `4860:15782`/`4860:15779`) — перенесена из `prototypes/card-animation/`.
   Каждый слайд галереи (`.catalog-card-slide`, раньше был самим `<img>`,
   теперь обёртка) держит два кадра одного фото: `.state` — нейтральная
   подсветка (покой), `.state.state--hover` — бирюзовая, поверх первого,
   проявляется по opacity при ховере/фокусе на карточке. Кадры генерирует
   `tools/card_hover_images/generate_card_hover_images.py` (`<name>-default`/
   `<name>-hover`, см. его README); для фото без сгенерированной пары
   `card_gallery_images` отдаёт одинаковый URL в оба состояния — тогда
   переход просто не виден. Тайминг (420ms/cubic-bezier) — из прототипа,
   дизайнером не согласован отдельно, но это единственное существующее
   значение под этот переход. */
.catalog-card-slide{position:absolute;inset:0;opacity:0;transition:opacity .18s ease;pointer-events:none}
.catalog-card-slide.is-active{opacity:1}
.catalog-card-slide .state{position:absolute;inset:0;width:100%;height:100%;display:block}
.catalog-card-slide .state--hover{opacity:0;transition:opacity 420ms cubic-bezier(.22,.61,.36,1)}
.catalog-card-media .catalog-card-slide .state{object-fit:cover}
.catalog-card-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
:is(.catalog-card:hover,.catalog-card:focus-within,
    .product-card:hover,.product-card:focus-within,
    .mini-card:hover,.mini-card:focus-within) .catalog-card-slide .state--hover{opacity:1}
@media(prefers-reduced-motion:reduce){.catalog-card-slide .state--hover{transition-duration:.01ms}}
.catalog-card-media:after{pointer-events:none}
.catalog-card-media .badge{z-index:3}
.catalog-card-info{position:relative}
.catalog-card-info-link{display:block;color:inherit}
.catalog-card-dots{position:absolute;z-index:4;top:6px;left:50%;display:flex;transform:translateX(-50%)}
.catalog-card-dot{position:relative;width:10px;height:10px;padding:0;border:0;background:transparent;cursor:pointer}
.catalog-card-dot:before{content:"";position:absolute;inset:2px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.catalog-card-dot.is-active:before{background:#449b9e}
.delta-card{display:flex;flex-direction:column}

.catalog-page .catalog-products{height:auto;min-height:1787.459px}
.catalog-page .catalog-card{height:380px}
.catalog-page .catalog-card-media{height:auto;aspect-ratio:366/320}
.catalog-page .catalog-card-info{flex:1;min-height:0;padding:24px}
.catalog-page .catalog-card-info strong{font-size:20px;line-height:1.2}
.catalog-page .catalog-card-info h3{margin-top:8px;font-size:14px;line-height:1}

@media(min-width:1600px){
  .catalog-page .catalog-products{min-height:1858.279px}
  .catalog-page .catalog-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
  .catalog-page .catalog-card{height:400px}
}

@media(max-width:1023px){
  .catalog-page .catalog-products{min-height:1190.063px}
  .catalog-page .catalog-products{padding-left:24px;padding-right:24px}
  .catalog-page .catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .catalog-page .catalog-card{height:216.021px}
  .catalog-page .catalog-card-media{aspect-ratio:190/166}
  .catalog-page .catalog-card-info{padding:16px 12px}
  .catalog-page .catalog-card-info strong{font-size:15px;line-height:1.1}
  .catalog-page .catalog-card-info h3{margin-top:4px;font-size:11px;line-height:1}
  .catalog-card-dots{top:3px}
  .catalog-card-dot{width:6px;height:6px}
  .catalog-card-dot:before{inset:1px;width:4px;height:4px}
}

@media(max-width:479px){
  .catalog-page .catalog-products{min-height:1459.684px}
  .catalog-page .catalog-products{padding-left:16px;padding-right:16px}
  .catalog-page .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .catalog-page .catalog-card{height:205.537px}
}

/* Карточки «Хиты продаж» на главной: та же галерея, что и в каталоге.
   2026-09-24: было object-fit:contain — оставляло леттербокс по бокам под
   старые белые фото товаров без фона (эталонный серый #383b3e был подобран
   именно под них). Все фото давно заменены на новые (см. раздел «Замена
   фото товаров на профессиональные»): квадратные, тёмный фон + бирюзовая
   подсветка — тот же стиль, что уже использует `.mini-card-media` (карточки
   «Линейки серии») с object-fit:cover. Contain здесь стал не нужен и делал
   фото у «Хитов» заметно уже самой карточки — клиент это заметил, сравнив
   с «Линейками». Меняем на cover, как у mini-card (у обеих карточек одно и
   то же соотношение сторон контейнера, 366/320 ≈ 239/209). `background:
   var(--bg)` оставлен безвредным — леттербокса с cover больше не бывает. */
.product-card .product-media{overflow:hidden;background:var(--bg)}
.product-card .product-media-link{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.product-card .product-media .catalog-card-slide .state{object-fit:cover}
.product-card .product-info-link{display:block;color:inherit}
.product-card .catalog-card-dots{top:8px}
@media(max-width:479px){.product-card .catalog-card-dots{top:4px}}
/* Эталон даёт цене на главной 6px до старой цены, а в самой ноде Product
   card (`4322:8217`, «Хиты продаж») gap между ними — 8px, как и в карточках
   «Линейки серии» (`.mini-card strong del`, уже 8px). */
.price del{margin-left:8px}

/* Карточки в «Линейках серии» — тот же Product card (Figma `4238:11633`):
   галерея с точками, старая цена, название 14px uppercase. */
.series-tabs-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:40px}
.series-tabs-row .tabs{margin-bottom:0}
.mini-products .mini-card{padding-bottom:0;display:flex;flex-direction:column;overflow:visible}
.mini-card-media{position:relative;width:100%;aspect-ratio:239/209;overflow:hidden;touch-action:pan-y}
.mini-card-media-link{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.mini-card-media .catalog-card-slide .state{object-fit:cover}
.mini-card-media .badge{z-index:3}
.mini-card-body{position:relative;flex:1;padding:24px;display:flex;flex-direction:column;gap:8px}
.mini-card-body .catalog-card-dots{top:8px}
.mini-card-info-link{display:block;color:inherit}
.mini-products .mini-card strong{display:block;margin:0;font:20px/1.2 var(--display);text-transform:uppercase}
.mini-products .mini-card strong del{margin-left:8px;color:var(--muted);font:14px/1 var(--body)}
.mini-card-name{display:block;margin:8px 0 0;font-size:14px;line-height:1;text-transform:uppercase;opacity:.8}

/* Ховер-раскрытие карточки в ряду линеек по макету Figma `4238:11633`:
   по умолчанию карточка короче (без характеристик), на hover/focus
   вырастает на ~104px и показывает `dl` поверх контента снизу — карточки
   в ряду не тянутся по высоте друг за другом (grid `align-items` не
   меняем), это position:absolute оверлей.
   Эталонный `.series-section{overflow:hidden}` (styles-core.css) обрезал
   нижнюю часть этого оверлея у последнего (единственного) ряда карточек —
   после раскрытия панель на ~150px выходит за нормальную высоту секции,
   а overflow:hidden ancestor резал её вплотную к своему padding-bottom
   (60px), из-за чего последняя строка характеристик и её нижний padding
   визуально пропадали (баг: «отступа под последней строкой нет»). Секции
   самой характеристики не переполняют по X, только Y — `overflow:visible`
   безопасен.
   2026-09-22: клиент подтвердил, что то же самое раскрытие нужно и
   карточкам «Хиты продаж» (`.product-card`) — раньше это было открытым
   вопросом («там карточка и так всегда с характеристиками, непонятно,
   что раскрывается»), теперь есть явный пример. `dl` вынесен из
   `.product-info-link` в такой же `.mini-card-specs`-оверлей
   (`index.html`, блок `#hits`). `.product-card` в эталоне — `overflow:
   hidden` без `position` вообще, оба нужно переопределить. */
.series-section,.products-section{overflow:visible}
.product-card{position:relative;overflow:visible}
/* 2026-09-24: `.mini-card`/`.product-card` не переопределяют border-radius
   эталона — карточка остаётся скруглённой 8px по ВСЕМ четырём углам (нужно
   для закрытого состояния, когда панель невидима). У панели скруглены
   только нижние углы (`border-radius:0 0 8px 8px`), верхние — прямые. При
   `top:100%` эти два скругления не совпадают: в нижних углах КАРТОЧКИ
   остаётся закрашенный фоном изгиб радиусом 8px, а панель встык под ним
   начинается прямым углом — между ними по кругу остаётся маленький
   непрокрашенный скруглённый треугольник (виден фон страницы). Панель
   сдвинута вверх ровно на радиус (`top:calc(100% - 8px)`), её собственный
   прямой угол при раскрытии перекрывает этот изгиб своим фоном — стык
   выглядит одной сплошной прямой линией. `dl` получил +8px к верхнему
   паддингу (28px вместо 20px), чтобы видимый отступ до первой строки
   характеристик от нижнего края карточки остался прежним (Figma-точным). */
.mini-card-specs{position:absolute;left:0;right:0;top:calc(100% - 8px);z-index:2;display:grid;grid-template-rows:0fr;background:var(--surface);border-radius:0 0 8px 8px;box-shadow:0 16px 32px rgba(0,0,0,.35);transition:grid-template-rows .25s ease}
.mini-card-specs>div{overflow:hidden;min-height:0}
.mini-card-specs dl{margin:0;padding:28px 24px 24px;display:grid;gap:12px;font-family:var(--display);font-size:12px;text-transform:uppercase}
.mini-card-specs dl div{display:flex;align-items:baseline;gap:8px}
.mini-card-specs dl div:after{content:"";order:2;flex:1;border-bottom:1px solid rgba(255,255,255,.12)}
.mini-card-specs dt{order:1;color:var(--muted)}
.mini-card-specs dd{order:3;margin:0}
:is(.mini-card,.product-card):focus-within .mini-card-specs{grid-template-rows:1fr}
@media(hover:hover){
  :is(.mini-card,.product-card):hover{z-index:3}
  :is(.mini-card,.product-card):hover .mini-card-specs{grid-template-rows:1fr}
}

@media(max-width:1023px){
  .series-tabs-row{margin-bottom:24px}
  .mini-card-body{padding:16px 12px;gap:4px}
  .mini-products .mini-card strong{font-size:15px}
  .mini-products .mini-card strong del{margin-left:6px;font-size:11px}
  .mini-card-name{margin-top:4px;font-size:11px}
  .mini-card-body .catalog-card-dots{top:3px}
}

@media(max-width:479px){
  .mini-card-media{aspect-ratio:190/166}
  .mini-card-body{padding:12px}
}