/* Product page recommendation cards — 2026-08-15. */

.page-product .product-card--recommendation .product-card__media {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Disable the old generic bottle/photo overlay for recommendation cards. */
.page-product .product-card--recommendation .product-card__media::after {
    display: none !important;
    content: none !important;
}

/* The imported botanical artwork contains a legacy inset on the far left.
   Crop that edge only inside recommendations, keeping the plant as the main art. */
.page-product .product-card--recommendation .recommendation-product-art {
    position: relative;
    z-index: 1;
    width: 122%;
    max-width: none;
    height: 100%;
    margin-left: -22%;
    padding: 0;
    object-fit: cover;
    object-position: 68% center;
    transform: none !important;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}

.page-product .product-card--recommendation:hover .recommendation-product-art {
    transform: scale(1.02) !important;
    filter: saturate(1.02);
}

/* Use the actual variant media (the real bottle) as the small product accent. */
.page-product .product-card--recommendation .recommendation-product-bottle {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 14px;
    width: min(27%, 92px);
    height: min(48%, 170px);
    max-width: none;
    padding: 0;
    object-fit: contain;
    object-position: right bottom;
    background: transparent;
    border: 0;
    filter: drop-shadow(0 13px 15px rgba(30, 49, 25, .24));
    transform: translateY(2px);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease;
    pointer-events: none;
}

.page-product .product-card--recommendation:hover .recommendation-product-bottle {
    transform: translateY(-5px) rotate(-1deg) scale(1.035);
    filter: drop-shadow(0 17px 18px rgba(30, 49, 25, .28));
}

@media (max-width: 760px) {
    .page-product .product-card--recommendation .recommendation-product-art {
        width: 116%;
        margin-left: -16%;
        object-position: 65% center;
    }

    .page-product .product-card--recommendation .recommendation-product-bottle {
        right: 10px;
        bottom: 10px;
        width: min(25%, 82px);
        height: min(44%, 150px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-product .product-card--recommendation .recommendation-product-art,
    .page-product .product-card--recommendation .recommendation-product-bottle {
        transition: none !important;
    }
}