/*
 * LetsCo main content placeholder styling.
 * Scoped to #main-content-scroll so header, sidebar, and footer are not affected.
 * Light mode is forced white for placeholders even if a global .dark class is cached elsewhere.
 */

#main-content-scroll .letsco-product-placeholder > .letsco-placeholder-card,
#main-content-scroll article[aria-label="Product Card"] > .letsco-placeholder-card,
#main-content-scroll article[aria-label="Product Card"] > div {
    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,
#main-content-scroll article[aria-label="Product Card"] > div > div {
    background-color: #ffffff !important;
}

/* Dark mode is applied to #main-content-scroll itself by letsco-app.js. */
#main-content-scroll.dark .letsco-product-placeholder > .letsco-placeholder-card,
#main-content-scroll.dark article[aria-label="Product Card"] > .letsco-placeholder-card,
#main-content-scroll.dark article[aria-label="Product Card"] > div,
.dark #main-content-scroll .letsco-product-placeholder > .letsco-placeholder-card,
.dark #main-content-scroll article[aria-label="Product Card"] > .letsco-placeholder-card,
.dark #main-content-scroll article[aria-label="Product Card"] > div {
    background-color: #121212 !important;
    border-color: #4b5563 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

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

/* Explicit light-mode guard. This prevents a black/dark placeholder center from sticking when light mode is selected. */
#main-content-scroll:not(.dark) .letsco-product-placeholder > .letsco-placeholder-card,
#main-content-scroll:not(.dark) article[aria-label="Product Card"] > .letsco-placeholder-card,
#main-content-scroll:not(.dark) article[aria-label="Product Card"] > div,
html:not(.dark) body:not(.dark) #main-content-scroll:not(.dark) .letsco-product-placeholder > .letsco-placeholder-card,
html:not(.dark) body:not(.dark) #main-content-scroll:not(.dark) article[aria-label="Product Card"] > div {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

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

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

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