/* =====================================================================
   DEMANGKARTA V4.19.9.31 — PUBLIC PRODUCT CARD MEDIA NORMALIZER
   Keeps every product image inside one predictable 4:3 canvas and removes
   visual whitespace from legacy uploads without changing the source file.
   ===================================================================== */

:root {
    --dmk-product-card-media-ratio: 4 / 3;
}

body.app-context--public :is(
    a.ui-card[href^="/katalog/"],
    a.ui-card[href*="/katalog/"]
) {
    height: 100%;
    min-width: 0;
}

body.app-context--public :is(
    a.ui-card[href^="/katalog/"],
    a.ui-card[href*="/katalog/"]
) .card-media {
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--dmk-product-card-media-ratio) !important;
    overflow: hidden !important;
    background: #e5efeb !important;
}

body.app-context--public :is(
    a.ui-card[href^="/katalog/"],
    a.ui-card[href*="/katalog/"]
) .card-media > :where(img, picture, picture > img, .media-placeholder) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.app-context--public :is(
    a.ui-card[href^="/katalog/"],
    a.ui-card[href*="/katalog/"]
) .card-media > img,
body.app-context--public :is(
    a.ui-card[href^="/katalog/"],
    a.ui-card[href*="/katalog/"]
) .card-media > picture > img {
    position: absolute !important;
    inset: 0 !important;
    object-fit: cover !important;
    object-position: var(--dmk-product-focus-x, 50%) var(--dmk-product-focus-y, 50%) !important;
    transform-origin: var(--dmk-product-focus-x, 50%) var(--dmk-product-focus-y, 50%) !important;
    transform: scale(calc(var(--dmk-product-smart-zoom, 1) + var(--dmk-product-hover-zoom, 0))) !important;
    transition: transform .28s ease, filter .28s ease !important;
    will-change: transform;
}

body.app-context--public :is(
    a.ui-card[href^="/katalog/"],
    a.ui-card[href*="/katalog/"]
):hover .card-media {
    --dmk-product-hover-zoom: .018;
}

body.app-context--public :is(
    a.ui-card[href^="/katalog/"],
    a.ui-card[href*="/katalog/"]
) .card-media.is-product-media-normalized::after {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(5,42,33,.045));
}

body.app-context--public .public-product-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

body.app-context--public .public-product-grid > .public-product-card {
    height: 100%;
}

body.app-context--public .public-product-card .card-body {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
}

body.app-context--public .public-product-card .card-price {
    margin-top: auto !important;
    padding-top: .7rem;
}

body.app-context--public .public-product-card .card-meta,
body.app-context--public .public-product-card .card-meta > span:last-child,
body.app-context--public .public-product-card h3 {
    min-width: 0;
    max-width: 100%;
}

body.app-context--public .public-product-card .card-meta > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    :root {
        --dmk-product-card-media-ratio: 4 / 3;
    }

    body.app-context--public .public-product-card .card-price {
        padding-top: .55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-context--public :is(
        a.ui-card[href^="/katalog/"],
        a.ui-card[href*="/katalog/"]
    ) .card-media > img,
    body.app-context--public :is(
        a.ui-card[href^="/katalog/"],
        a.ui-card[href*="/katalog/"]
    ) .card-media > picture > img {
        transition: none !important;
    }
}