/* Карточки каталога в стиле Wildberries: вертикальные, фото-доминанта, компактно */
/* ── Сетка: больше карточек в ряд ── */
.catalog__in {
display: flex !important;
flex-wrap: wrap !important;
gap: 22px 14px !important;
align-items: flex-start;
}
/* .catalog__item — реальный флекс-элемент (обёртка карточки). Ширина = 5 в ряд */
.catalog__in > .catalog__item {
flex: 0 0 calc(20% - 12px) !important;
max-width: calc(20% - 12px) !important;
width: calc(20% - 12px) !important;
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 1400px) { .catalog__in > .catalog__item { flex-basis: calc(25% - 11px) !important; max-width: calc(25% - 11px) !important; width: calc(25% - 11px) !important; } }
@media (max-width: 1100px) { .catalog__in > .catalog__item { flex-basis: calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; width: calc(33.333% - 10px) !important; } }
@media (max-width: 700px) { .catalog__in > .catalog__item { flex-basis: calc(50% - 7px) !important; max-width: calc(50% - 7px) !important; width: calc(50% - 7px) !important; } .catalog__in { gap: 16px 10px !important; } }
/* Карточка внутри обёртки — на всю ширину, без рамки/фона (как WB) */
.goods {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
display: flex !important;
flex-direction: column;
overflow: hidden;
}
.goods:hover { box-shadow: none !important; }
.goods__in { display: flex !important; flex-direction: column; }
/* принудительная ширина 100% на всех уровнях — перебиваем инлайн slick и схлопывание грид-элемента */
.goods, .goods__in, .goods__imgs,
.goods__imgs .slick-list, .goods__imgs .slick-track { width: 100% !important; }
/* ── Фото: вертикальное 3:4, скруглённое, обрезка по объекту ── */
.goods__imgs, .goods__imgs.js-goods-gallery {
width: 100% !important;
aspect-ratio: 3 / 4;
border-radius: 12px;
overflow: hidden;
background: #f3f5f7;
margin: 0 0 8px !important;
order: 1;
position: relative;
}
/* слайдер slick заставляем показывать одно фото на всю ширину карточки */
.goods__imgs .slick-list { height: 100% !important; width: 100% !important; overflow: hidden; }
.goods__imgs .slick-track { height: 100% !important; width: 100% !important; transform: none !important; }
.goods__imgs .slick-slide { width: 100% !important; height: 100% !important; float: none !important; }
.goods__imgs .slick-slide:not(.slick-current):not(.slick-active) { display: none !important; }
.goods__img, .goods__img.ibg {
width: 100% !important;
height: 100% !important;
border-radius: 12px;
overflow: hidden;
background: #f3f5f7;
float: none !important;
}
.goods__img img, .goods__img .img-responsive {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
/* ── ЖЁСТКО: картинка товара заполняет рамку 3:4 целиком и ОДИНАКОВО у всех ──
Проблема была в том, что height:100% не доходил до ![]()
по цепочке slick,
и картинка рендерилась по своей пропорции (у одних пусто снизу, у других обрезано).
Делаем всю цепочку 100% и позиционируем img абсолютно внутри рамки → cover заполняет ровно. */
.catalog__in .goods__imgs .slick-list,
.catalog__in .goods__imgs .slick-track,
.catalog__in .goods__imgs .slick-slide,
.catalog__in .goods__imgs .slick-slide > div { height: 100% !important; }
.catalog__in .goods__imgs .goods__img,
.catalog__in .goods__imgs .goods__img.ibg {
position: relative !important; height: 100% !important; display: block !important;
}
.catalog__in .goods__imgs .goods__img img,
.catalog__in .goods__imgs img.img-responsive {
position: absolute !important; top: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
object-fit: cover !important; display: block !important;
}
/* (блок поставщика вынесен в единый авторитетный раздел в конце файла) */
/* Иконки (избранное) поверх фото, справа сверху */
.goods__icons { position: absolute; top: 8px; right: 8px; z-index: 3; order: 0; }
/* Точки слайдера — компактно поверх фото */
.goods__imgs .slick-dots { bottom: 6px; }
/* ── Цена крупная и жирная (WB) ── */
.goods__price, .goods__price.hello {
order: 2;
font-size: 19px !important;
font-weight: 800 !important;
color: #1d2733 !important;
line-height: 1.2;
margin: 6px 0 2px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.goods__price #price_edit, .goods__price #batch_price_edit { font-size: inherit; font-weight: 800; white-space: nowrap; }
.goods__price .goods__size-title { font-size: 11px; font-weight: 500; color: #8695a4; }
/* Артикул/название — как подпись товара */
.goods__flex { order: 3; align-items: baseline; }
.goods__art { font-size: 13px !important; color: #5b6b7d !important; font-weight: 500; }
.goods__date { display: none !important; } /* дату на карточке WB не показывает */
/* инфо-блок: убираем абсолютное позиционирование из старого дизайна (наложения) */
.goods__in > .goods__price,
.goods__in > .goods__flex,
.goods__in > .goods__supp,
.goods__in > .goods__size,
.goods__in > .goods__bottom {
position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
}
/* ── Поставщик + рейтинг компактно ── */
.goods__supp {
order: 5; display: flex !important; align-items: center; gap: 6px;
margin: 6px 0 0 !important; position: relative !important;
}
.goods__supp-left { display: flex !important; align-items: center; gap: 6px; position: static !important; }
.goods__supp-img { width: 20px !important; height: 20px !important; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.goods__supp-img img { width: 100%; height: 100%; object-fit: cover; }
.goods__supp-name { font-size: 12px !important; color: #5b6b7d !important; }
/* ── ФИКС раскладки низа карточки ──
Блоки .goods__supp и .goods__bottom лежат внутри