/* Elite Mall Recommendation Rail R1
   Build: 2026.08.08-recommendation-rail-r1
   Scope: Product "More from …" and Cart "Continue shopping" only.
   Contract: reuse the authoritative shared H4 product card; preserve full-image containment;
   do not participate in Public Media V2 orientation-row recomposition. */

.em-product-recommendation-rail {
    width: 100%;
    margin-top: 15px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(188px, 20vw, 230px);
    grid-template-rows: 1fr;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding: 2px 2px 10px;
    -webkit-overflow-scrolling: touch;
}

.em-product-recommendation-rail > .public-product-card {
    width: 100%;
    min-width: 0;
    height: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.em-product-recommendation-rail > .public-product-card > .elite-cut-link {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Recommendation shelves need coherent card geometry. The source image remains
   fully visible inside the common frame; no crop or zoom is introduced. */
.em-product-recommendation-rail .elite-cut-media {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1 !important;
    background: #fff;
}

.em-product-recommendation-rail .elite-cut-media > img:not(.elite-card-logo) {
    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;
}

.em-product-recommendation-rail .elite-cut-info {
    flex: 1 1 auto;
}

.em-product-recommendation-rail .elite-product-store-link {
    color: #5f3b07;
}

/* Product V4 becomes edge-to-edge on phones; retain its existing 10px content inset. */
@media (max-width: 820px) {
    body.product-v4 .product-v4-related .em-product-recommendation-rail {
        padding-inline: 10px;
    }
}

@media (max-width: 700px) {
    .em-product-recommendation-rail {
        grid-auto-columns: clamp(164px, 46vw, 188px);
        gap: 9px;
        margin-top: 12px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .em-product-recommendation-rail::-webkit-scrollbar { display: none; }
}

@media (max-width: 390px) {
    .em-product-recommendation-rail {
        grid-auto-columns: minmax(154px, 45vw);
        gap: 8px;
    }
}