.dtc-blog-stl-placeholder {
    padding: 24px;
    border: 1px dashed #b7b7b7;
    color: #666;
    text-align: center;
}

.single-post .elementor-widget-dtc_blog_shop_the_look .dtc-stl-products-section {
    width: 100%;
}

/* Match the light-grey image frame used by the Featured Products cards. */
.single-post .dtc-stl-featured-products .qodef-woo-product-image {
    background-color: #f7f7f7 !important;
}

.single-post .dtc-stl-featured-products .qodef-woo-product-image::after {
    background:
        linear-gradient(#f7f7f7, #f7f7f7) top / 100% 13% no-repeat,
        linear-gradient(#f7f7f7, #f7f7f7) bottom / 100% 13% no-repeat,
        linear-gradient(#f7f7f7, #f7f7f7) left / 13% 100% no-repeat,
        linear-gradient(#f7f7f7, #f7f7f7) right / 13% 100% no-repeat !important;
}

/*
 * A products-only widget is intended for the bottom of the article. Break it
 * out of the theme's boxed post column while leaving hotspot-only widgets and
 * the Related Posts section in their normal boxed containers.
 */
.single-post .dtc-blog-stl-output--full-products {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: none;
    margin-left: -50vw;
    box-sizing: border-box;
}

.single-post .dtc-blog-stl-output--full-products .dtc-stl-products-section {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 42px;
    padding-right: clamp(20px, 3vw, 60px);
    padding-left: clamp(20px, 3vw, 60px);
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .single-post .dtc-blog-stl-output--full-products .dtc-stl-products-section {
        padding-right: 20px;
        padding-left: 20px;
    }
}
