/*
 * LetsCo main content placeholder and product grid styling.
 * Scoped to #main-content-scroll so header, sidebar, and footer are not affected.
 *
 * Desired behavior:
 * - The page/main content background switches between light and dark mode.
 * - Placeholder/product cards stay visually consistent in both modes:
 *   white center with a double grey border.
 * - Expedia Travel visual cards are about 25% smaller than the previous large version.
 * - Regular placeholder cards match the same card footprint as the Expedia visual cards.
 */

#main-content-scroll .letsco-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 240px)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
    justify-content: start !important;
}

#main-content-scroll .letsco-product-placeholder {
    width: 100% !important;
    min-width: 0 !important;
}

#main-content-scroll .letsco-product-placeholder > .letsco-placeholder-card,
#main-content-scroll article[aria-label="Product Card"] > .letsco-placeholder-card {
    width: 100% !important;
    min-height: 330px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 4px double #d1d5db !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

#main-content-scroll .letsco-placeholder-center,
#main-content-scroll article[aria-label="Product Card"] > .letsco-placeholder-card > .letsco-placeholder-center {
    background-color: #ffffff !important;
}

/* Regular empty placeholders now match the same overall card footprint as the Expedia cards. */
#main-content-scroll .letsco-product-placeholder:not(.letsco-expedia-product-visual-card) > .letsco-placeholder-card > .letsco-placeholder-center,
#main-content-scroll article[aria-label="Product Card"] > .letsco-placeholder-card > .letsco-placeholder-center {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

#main-content-scroll .letsco-product-placeholder:hover > .letsco-placeholder-card,
#main-content-scroll article[aria-label="Product Card"]:hover > .letsco-placeholder-card {
    border-color: #9ca3af !important;
}

/* Expedia Travel visual cards: reduced roughly 25% from the previous 360px visual area. */
#main-content-scroll .letsco-expedia-product-visual-card .letsco-expedia-shop-card-center {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 270px !important;
    min-height: 270px !important;
    aspect-ratio: auto !important;
}

#main-content-scroll .letsco-expedia-product-visual-card .letsco-expedia-shop-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: #ffffff !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    #main-content-scroll .letsco-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    #main-content-scroll .letsco-product-placeholder > .letsco-placeholder-card,
    #main-content-scroll article[aria-label="Product Card"] > .letsco-placeholder-card {
        min-height: 250px !important;
    }

    #main-content-scroll .letsco-expedia-product-visual-card .letsco-expedia-shop-card-center {
        height: 195px !important;
        min-height: 195px !important;
    }
}

@media (min-width: 1280px) {
    #main-content-scroll .letsco-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 240px)) !important;
    }
}