/* Elite Mall Public Product Media V2
   Build: 2026.08.02-public-foundation-r1
   Scope: product imagery and orientation-homogeneous public product rows only. */

:root {
    --em-public-media-gap: 12px;
}

/* The product is the asset. Public product imagery is never cropped or zoomed. */
[data-em-public-media],
.elite-cut-media,
.emlab-product-media,
.emx-product-media,
.emcore-product-card__media,
.emcore-cart-item__media,
.product-detail-media,
.product-gallery-slide,
.gallery-thumb,
.emcore-store-directory-card__products a,
.store-card-media {
    overflow: hidden;
    background: #fff;
}

[data-em-public-media] > img,
[data-em-public-image],
.elite-cut-media > img:not(.elite-card-logo),
.emlab-product-media > img,
.emx-product-media > img,
.emcore-product-card__media > img,
.emcore-cart-item__media > img,
.product-detail-media img,
.product-gallery-slide > img:not(.elite-card-logo),
.gallery-thumb > img,
.emcore-store-directory-card__products img,
.store-card-media > img:not(.elite-card-logo),
.emlab-category-media img,
.emx-category-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    margin: 0 !important;
    background: #fff;
}

/* Media geometry follows the real source orientation. */
.em-public-media--portrait [data-em-public-media],
[data-em-public-orientation="portrait"] [data-em-public-media] { aspect-ratio: 3 / 4 !important; }
.em-public-media--square [data-em-public-media],
.em-public-media--pending [data-em-public-media],
[data-em-public-orientation="square"] [data-em-public-media],
[data-em-public-orientation="pending"] [data-em-public-media] { aspect-ratio: 1 / 1 !important; }
.em-public-media--landscape [data-em-public-media],
[data-em-public-orientation="landscape"] [data-em-public-media] { aspect-ratio: 4 / 3 !important; }
.em-public-media--panorama [data-em-public-media],
[data-em-public-orientation="panorama"] [data-em-public-media] { aspect-ratio: 16 / 9 !important; }

/* Shared artistic row composition. The original container remains the owner;
   only its direct product cards are wrapped into aligned homogeneous rows. */
.em-public-media-composed {
    white-space: normal !important;
}

/* Product directories and store shelves become calm stacked rows. */
.em-public-media-composed--grid {
    display: block !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
}

/* Approved homepage and cart rails stay horizontal. Each scroll unit is one
   complete orientation-homogeneous row, so the established interaction and
   section controls remain intact. */
.em-public-media-composed--rail {
    display: flex !important;
    align-items: stretch;
    gap: var(--em-public-media-gap) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-inline: contain;
}
.em-public-media-composed--rail > .em-public-media-row {
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0;
    grid-template-columns: repeat(
        var(--em-row-count),
        minmax(
            0,
            calc((100% - ((var(--em-row-capacity) - 1) * var(--em-row-gap))) / var(--em-row-capacity))
        )
    );
    justify-content: center;
    scroll-snap-align: start;
}

.em-public-media-row {
    --em-row-count: 1;
    --em-row-capacity: 1;
    --em-row-gap: var(--em-public-media-gap);
    width: min(
        100%,
        calc(
            ((100% - ((var(--em-row-capacity) - 1) * var(--em-row-gap))) / var(--em-row-capacity) * var(--em-row-count))
            + ((var(--em-row-count) - 1) * var(--em-row-gap))
        )
    );
    margin: 0 auto var(--em-row-gap);
    display: grid;
    grid-template-columns: repeat(var(--em-row-count), minmax(0, 1fr));
    gap: var(--em-row-gap);
    align-items: stretch;
}
.em-public-media-row:last-child { margin-bottom: 0; }

.em-public-media-row > [data-em-public-card],
.em-public-media-row > .elite-cut-card--shelf,
.em-public-media-row > .public-product-card,
.em-public-media-row > .emlab-product-card,
.em-public-media-row > .emx-product-card,
.em-public-media-row > .emcore-product-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    flex: none !important;
    align-self: stretch;
}

.em-public-media-row > [data-em-public-card] > a,
.em-public-media-row > .elite-cut-card--shelf > a,
.em-public-media-row > .public-product-card > a,
.em-public-media-row > .emlab-product-card > a,
.em-public-media-row > .emx-product-card > a,
.em-public-media-row > .emcore-product-card > a {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.em-public-media-row .elite-cut-info,
.em-public-media-row .emlab-product-copy,
.em-public-media-row .emx-product-body,
.em-public-media-row .emcore-product-card__body {
    flex: 1 1 auto;
}

/* A lone horizontal product is centred and never stretched into a billboard. */
.em-public-media-composed--grid > .em-public-media-row--landscape.em-public-media-row--count-1,
.em-public-media-composed--grid > .em-public-media-row--panorama.em-public-media-row--count-1 {
    max-width: 720px;
}

/* Product-detail galleries retain the complete asset at a useful scale. */
.product-detail-media {
    display: grid;
    place-items: center;
}
.product-detail-media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(76vh, 900px);
}

/* Public Core modern pages must never reveal the retired legacy shell. */
body.public-modern-shell > .public-topbar,
body.public-modern-shell > .footer,
body.public-modern-shell > main.public-container {
    display: none !important;
}

@media (max-width: 680px) {
    :root { --em-public-media-gap: 8px; }
    .em-public-media-composed { padding-right: 0 !important; padding-left: 0 !important; }
    .em-public-media-row .elite-cut-info,
    .em-public-media-row .emlab-product-copy,
    .em-public-media-row .emx-product-body,
    .em-public-media-row .emcore-product-card__body {
        min-height: 92px;
    }
}

@media (max-width: 480px) {
    :root { --em-public-media-gap: 7px; }
    .em-public-media-row .elite-cut-title,
    .em-public-media-row .emlab-product-name,
    .em-public-media-row .emx-product-body h3,
    .em-public-media-row .emcore-product-card__body h3 {
        font-size: .78rem !important;
        line-height: 1.24 !important;
    }
    .em-public-media-row .elite-cut-price,
    .em-public-media-row .emlab-product-price,
    .em-public-media-row .emx-price-row strong,
    .em-public-media-row .emcore-product-card__price strong {
        font-size: .88rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .em-public-media-row,
    .em-public-media-row * { transition: none !important; }
}

/* Desktop product-grid media geometry repair
   Revision: 2026.08.02-public-foundation-desktop-media-r3
   The shared row composer was already grouping cards by source orientation,
   but desktop discovery/store cards retained page-level fixed media heights.
   These selectors bind the real media container to the row orientation without
   changing the approved phone, tablet, rail, filter, sort or card-body layouts. */
@media (min-width: 1025px) {
    .em-public-media-composed--grid .em-public-media-row--portrait [data-em-public-media],
    .em-public-media-composed--grid .em-public-media-row--portrait .elite-cut-media,
    .em-public-media-composed--grid .em-public-media-row--portrait .emlab-product-media,
    .em-public-media-composed--grid .em-public-media-row--portrait .emx-product-media,
    .em-public-media-composed--grid .em-public-media-row--portrait .emcore-product-card__media {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 3 / 4 !important;
    }

    .em-public-media-composed--grid .em-public-media-row--square [data-em-public-media],
    .em-public-media-composed--grid .em-public-media-row--pending [data-em-public-media],
    .em-public-media-composed--grid .em-public-media-row--square .elite-cut-media,
    .em-public-media-composed--grid .em-public-media-row--pending .elite-cut-media,
    .em-public-media-composed--grid .em-public-media-row--square .emlab-product-media,
    .em-public-media-composed--grid .em-public-media-row--pending .emlab-product-media,
    .em-public-media-composed--grid .em-public-media-row--square .emx-product-media,
    .em-public-media-composed--grid .em-public-media-row--pending .emx-product-media,
    .em-public-media-composed--grid .em-public-media-row--square .emcore-product-card__media,
    .em-public-media-composed--grid .em-public-media-row--pending .emcore-product-card__media {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    .em-public-media-composed--grid .em-public-media-row--landscape [data-em-public-media],
    .em-public-media-composed--grid .em-public-media-row--landscape .elite-cut-media,
    .em-public-media-composed--grid .em-public-media-row--landscape .emlab-product-media,
    .em-public-media-composed--grid .em-public-media-row--landscape .emx-product-media,
    .em-public-media-composed--grid .em-public-media-row--landscape .emcore-product-card__media {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
    }

    .em-public-media-composed--grid .em-public-media-row--panorama [data-em-public-media],
    .em-public-media-composed--grid .em-public-media-row--panorama .elite-cut-media,
    .em-public-media-composed--grid .em-public-media-row--panorama .emlab-product-media,
    .em-public-media-composed--grid .em-public-media-row--panorama .emx-product-media,
    .em-public-media-composed--grid .em-public-media-row--panorama .emcore-product-card__media {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
    }
}