/* LAHOME wishlist layout correction v2
 * Scope: guest wishlist page only.
 * Purpose: keep the 20% left sidebar and 80% wishlist content side-by-side,
 * then render exactly 3 product cards inside the content area.
 */

/* The LaHome header layout gives #sidebar2 an inline width:20%.
 * Previous wishlist CSS forced #center_column to width:100%/float:none,
 * which made the wishlist content flow around and then under the sidebar.
 * Override that only on this module page and only when sidebar2 is present.
 */
@media (min-width: 768px) {
    #module-blockwishlist-mywishlist #sidebar2 {
        float: left !important;
        clear: none !important;
        width: 20% !important;
        max-width: 20% !important;
        box-sizing: border-box !important;
    }

    #module-blockwishlist-mywishlist #sidebar2 + #center_column {
        float: left !important;
        clear: none !important;
        width: 80% !important;
        max-width: 80% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #module-blockwishlist-mywishlist #sidebar2 + #center_column:before,
    #module-blockwishlist-mywishlist #sidebar2 + #center_column:after {
        display: none !important;
    }

    #module-blockwishlist-mywishlist #sidebar2 + #center_column #guest-wishlist {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
}

/* Grid itself: remove Bootstrap row/column behaviour completely. */
#guest-wishlist .wishlist-guest-products {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

#guest-wishlist .wishlist-guest-products:before,
#guest-wishlist .wishlist-guest-products:after {
    display: none !important;
    content: none !important;
}

#guest-wishlist .wishlist-guest-item,
#guest-wishlist .wishlist-guest-item.col-xs-12,
#guest-wishlist .wishlist-guest-item.col-sm-6,
#guest-wishlist .wishlist-guest-item.col-md-4 {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Desktop / wider tablet: exactly three cards in the 80% content column. */
@media (min-width: 850px) {
    #guest-wishlist .wishlist-guest-products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 14px !important;
        row-gap: 20px !important;
    }
}

/* Narrow tablet: two cards. */
@media (min-width: 768px) and (max-width: 849px) {
    #guest-wishlist .wishlist-guest-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 14px !important;
        row-gap: 18px !important;
    }
}

/* Mobile: sidebar and content stack normally, one card per row. */
@media (max-width: 767px) {
    #module-blockwishlist-mywishlist #sidebar2,
    #module-blockwishlist-mywishlist #sidebar2 + #center_column {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #guest-wishlist .wishlist-guest-products {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 16px !important;
    }
}

/* Keep cards equal-height without altering their existing visual design. */
#guest-wishlist .wishlist-guest-card.lh-wishlist-product-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

#guest-wishlist .wishlist-guest-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Preserve the already-approved button appearance; only guarantee they fit
 * in the narrower 3-column card without overflowing.
 */
#guest-wishlist .wishlist-guest-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: auto 0 0 !important;
    box-sizing: border-box !important;
}

#guest-wishlist .wishlist-guest-actions .btn {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#guest-wishlist .wishlist-guest-actions .btn-default {
    flex: 1.35 1 0 !important;
}

#guest-wishlist .wishlist-guest-actions .wishlist-guest-remove {
    flex: .85 1 0 !important;
}