/*
 * Shared layout rules for the product full page and the product association page:
 *   - .sticky-height becomes position:sticky only on tall viewports
 *   - the two-column layout uses reversed visual order vs DOM order
 *
 * The two pages use different column class names (Bootstrap col-md-5/7 on the PDP,
 * semantic .product-association-*-column on the association page), hence the
 * two parallel selector groups.
 */

/* Sticky behavior is shared by both surfaces. */
.sticky-height {
    position: static;
}

@media (min-height: 800px) {
    .sticky-height {
        position: sticky;
        top: 0;
    }
}

/* Product full page (PDP) layout. */
.product-full .row {
    display: flex;
}

.product-full .col-md-5 {
    order: 2;
}

.product-full .col-md-7 {
    order: 1;
}

/* Association page layout (semantic classes). */
.product-association .product-association-layout {
    display: flex;
}

.product-association .product-association-layout > [class*="col-"] {
    min-width: 0;
    max-width: 100%;
}

.product-association .product-association-card-column {
    order: 2;
}

.product-association .product-association-media-column {
    order: 1;
}

.product-association .card,
.product-association .card-body,
.product-association .pa-description-list-wrapper,
.product-association .pa-description-card,
.product-association .pa-description-card__layout,
.product-association .pa-description-card__media {
    min-width: 0;
    max-width: 100%;
}