/* =====================================================================
   DEMANGKARTA V4.19.9.15 — PUBLIC PRODUCT MEDIA CANONICAL
   One canvas for product cards and product detail images/video.
   This file must be the final public media cascade layer.
   ===================================================================== */

:root {
    --dmk-product-card-ratio: 4 / 3;
    --dmk-product-detail-ratio: 4 / 3;
    --dmk-product-media-bg: #e8f1ed;
    --dmk-product-media-line: rgba(18, 61, 50, .10);
}

/* Product card geometry is identical on Home, Catalog, Lapak and Search. */
body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) {
    min-width: 0;
    overflow: hidden;
}

body :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-ratio) !important;
    overflow: hidden !important;
    border-bottom: 1px solid var(--dmk-product-media-line);
    background: var(--dmk-product-media-bg) !important;
}

body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-media::before {
    content: "";
    position: absolute;
    inset: -9%;
    z-index: 0;
    background-image: var(--dmk-product-media-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(25px) saturate(.88);
    opacity: .16;
    transform: scale(1.09);
    pointer-events: none;
}

body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(8, 48, 39, .035));
    pointer-events: none;
}

body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-media :where(img, picture, picture > img, video, .media-placeholder) {
    position: relative;
    z-index: 2;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    filter: none !important;
}

body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-media .media-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #edf5f1, #ddeae4) !important;
}

body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-body {
    min-height: 10.2rem;
}

body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-body h3 {
    display: -webkit-box;
    min-height: 2.5em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-meta > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]):hover .card-media img {
    transform: scale(1.025) !important;
}

/* Product detail: all slides use one 4:3 canvas. */
body[data-current-path^="/katalog/"] .detail-hero {
    min-height: 0 !important;
    align-items: start !important;
}

body[data-current-path^="/katalog/"] .detail-hero__media {
    position: relative;
    isolation: isolate;
    align-self: start;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--dmk-product-detail-ratio) !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #edf5f1, #dfeae5) !important;
}

body[data-current-path^="/katalog/"] .detail-hero__media > :where(img, .media-placeholder, .media-slider, .public-product-media-slider),
body[data-current-path^="/katalog/"] .media-slider__viewport,
body[data-current-path^="/katalog/"] .media-slider__track,
body[data-current-path^="/katalog/"] .media-slider__slide {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

body[data-current-path^="/katalog/"] .media-slider__viewport {
    overflow-x: auto;
}

body[data-current-path^="/katalog/"] .media-slider__track {
    gap: 0 !important;
    align-items: stretch !important;
}

body[data-current-path^="/katalog/"] .media-slider__slide {
    position: relative;
    isolation: isolate;
    flex: 0 0 100% !important;
    display: grid !important;
    place-items: center;
    overflow: hidden !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .95), transparent 40%),
        linear-gradient(145deg, #edf5f1, #dfeae5) !important;
}

body[data-current-path^="/katalog/"] .media-slider__slide::before {
    content: "";
    position: absolute;
    inset: -9%;
    z-index: 0;
    background-image: var(--dmk-product-media-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(29px) saturate(.9);
    opacity: .19;
    transform: scale(1.1);
    pointer-events: none;
}

body[data-current-path^="/katalog/"] .media-slider__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(8, 43, 35, .03));
    pointer-events: none;
}

body[data-current-path^="/katalog/"] .media-slider__slide > :where(img, picture, picture > img, .media-frame, .dmk-tv-player, .media-placeholder) {
    position: relative;
    z-index: 2;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
}

body[data-current-path^="/katalog/"] .media-slider__slide > img,
body[data-current-path^="/katalog/"] .media-slider__slide > picture > img {
    padding: clamp(.75rem, 1.5vw, 1.35rem) !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 14px 28px rgba(13, 45, 37, .11)) !important;
}

body[data-current-path^="/katalog/"] .media-slider__slide.is-video {
    background: #020706 !important;
}

body[data-current-path^="/katalog/"] .media-slider__slide.is-video::before,
body[data-current-path^="/katalog/"] .media-slider__slide.is-video::after {
    display: none;
}

body[data-current-path^="/katalog/"] .media-slider__slide.is-video > :where(.dmk-tv-player, .media-frame) {
    padding: 0 !important;
    overflow: hidden;
    background: #000 !important;
}

body[data-current-path^="/katalog/"] :where(
    .dmk-tv-player,
    .dmk-tv-player__screen,
    .dmk-tv-player iframe,
    .dmk-tv-player video,
    .dmk-tv-player__native,
    .dmk-tv-player__poster
) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

body[data-current-path^="/katalog/"] .dmk-tv-player iframe,
body[data-current-path^="/katalog/"] .dmk-tv-player__native {
    inset: 0 !important;
    object-fit: contain !important;
}

body[data-current-path^="/katalog/"] .dmk-tv-player__poster {
    object-fit: cover !important;
}

body[data-current-path^="/katalog/"] .media-slider__arrow,
body[data-current-path^="/katalog/"] .media-slider__counter {
    z-index: 35 !important;
}

body[data-current-path^="/katalog/"] .media-slider__counter {
    right: .9rem;
    bottom: .9rem;
}

@media (max-width: 980px) {
    body[data-current-path^="/katalog/"] .detail-hero {
        grid-template-columns: 1fr !important;
    }

    body[data-current-path^="/katalog/"] .detail-hero__media {
        width: 100% !important;
        aspect-ratio: var(--dmk-product-detail-ratio) !important;
    }
}

@media (max-width: 767px) {
    body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-body {
        min-height: 8.9rem;
    }

    body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-body h3 {
        min-height: 2.45em;
    }

    body[data-current-path^="/katalog/"] .media-slider__slide > img,
    body[data-current-path^="/katalog/"] .media-slider__slide > picture > img {
        padding: .7rem !important;
    }
}

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

    body :is(a.ui-card[href^="/katalog/"], a.ui-card[href*="/katalog/"]) .card-body {
        min-height: 8.45rem;
        padding: .78rem .8rem .88rem !important;
    }
}

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