/* Ryjik Catalog Grid — v2.0.0
   Тема Meow форсит `ul.products { display:grid }`, но ряды тянут карточки под высоту самой
   высокой и делают это неаккуратно. Наш вариант: explicit grid 2/3/4/5 колонок по брейкпоинтам,
   внутри карточки flex-column, цена+кнопка прижаты к низу — ряды ровные, контент выровнен.
   Scope: `.grid ul.products` архивов + `.ryjik-home-section ul.products` секций главной
   + `.ryjik-cart-cross-sells ul.products` блока «Вас также может заинтересовать» в корзине.
   Карусели темы (`.enova-carousel`) исключены через :not() — у них свой tiny-slider layout.
   List view `.comp` не затронут. */

.grid ul.products:not(.enova-carousel),
.ryjik-home-section ul.products:not(.enova-carousel),
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.grid ul.products:not(.enova-carousel) > li.product,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product {
    width: auto;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Make card body a flex column so price+button block can stick to bottom
   regardless of title length variation. */
.grid ul.products:not(.enova-carousel) > li.product .post-body,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-body,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.grid ul.products:not(.enova-carousel) > li.product .post-body-inner,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-body-inner,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-body-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.grid ul.products:not(.enova-carousel) > li.product .price-button-wrapp,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .price-button-wrapp,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .price-button-wrapp {
    margin-top: auto;
}

/* Clamp title to 2 lines to keep card heights close without truncating data. */
.grid ul.products:not(.enova-carousel) > li.product .post-title,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-title,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    word-break: break-word;
}

.product .post-category {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Theme inlines max-width:200px + width/height attrs on .lazy-inline-image; in 2-col grid
   the card is <200px wide. Force fluid image so it fits without overflow. */
.grid ul.products:not(.enova-carousel) li.product .post-image .lazy-inline-image,
.ryjik-home-section ul.products:not(.enova-carousel) li.product .post-image .lazy-inline-image,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) li.product .post-image .lazy-inline-image {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}
.grid ul.products:not(.enova-carousel) li.product .post-image img,
.ryjik-home-section ul.products:not(.enova-carousel) li.product .post-image img,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) li.product .post-image img {
    height: auto !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* Fixed-height image slot so cards don't reflow as images load. */
.product .post-image.post-media.overlay-hover {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product .post-image.post-media.overlay-hover > a,
.product .post-image.post-media.overlay-hover .image-container,
.product .post-image.post-media.overlay-hover .lazy-inline-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}
.product .post-image.post-media.overlay-hover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

@media (min-width: 768px) {
    .grid ul.products:not(.enova-carousel),
    .ryjik-home-section ul.products:not(.enova-carousel),
    .ryjik-cart-cross-sells ul.products:not(.enova-carousel) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .grid ul.products:not(.enova-carousel),
    .ryjik-home-section ul.products:not(.enova-carousel),
    .ryjik-cart-cross-sells ul.products:not(.enova-carousel) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .grid ul.products:not(.enova-carousel),
    .ryjik-home-section ul.products:not(.enova-carousel),
    .ryjik-cart-cross-sells ul.products:not(.enova-carousel) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Catalog sidebar minimum width on desktop. Theme grid is `16% 79.3%` (≥1280)
   and `18% 76.3%` (≥1024) which collapses the filter column to ~190px and
   wraps long term labels. Floor it at 240px while letting content take the
   rest with 1fr. */
@media (min-width: 1024px) {
    .sidebar-active.product-layout > .container {
        grid-template-columns: minmax(240px, 18%) 1fr;
    }
}
@media (min-width: 1280px) {
    .sidebar-active.product-layout > .container {
        grid-template-columns: minmax(240px, 16%) 1fr;
    }
}