/*
 * KingSoft / Osapa 2.2.4 migration — Phase 7
 * Related-products row lock and restoration of the legacy shop view toolbar.
 */

/* Related products: force a stable 4-card row on desktop. */
.single-product .kingsoft-related-products {
    clear: both;
    width: 100% !important;
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

.single-product .kingsoft-related-products .kingsoft-related-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start;
    gap: 30px;
    width: 100% !important;
    max-width: none !important;
    margin: 50px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.single-product .kingsoft-related-products .kingsoft-related-card {
    display: block !important;
    float: none !important;
    clear: none !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-product .kingsoft-related-products .kingsoft-related-image {
    height: 320px;
}

.single-product .kingsoft-related-products .kingsoft-related-meta {
    grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
    gap: 10px;
}

.single-product .kingsoft-related-products .kingsoft-related-title,
.single-product .kingsoft-related-products .kingsoft-related-price {
    font-size: 14px;
    line-height: 20px;
}

/* Restore the toolbar that used to occupy the white bar above the products. */
.woocommerce .before-loop-wrapper {
    min-height: 50px;
}

.woocommerce .before-loop-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.woocommerce .before-loop-wrapper .kingsoft-grid-list-nav {
    display: block;
}

.woocommerce .before-loop-wrapper .kingsoft-grid-list-nav a:focus,
.woocommerce .before-loop-wrapper .kingsoft-grid-list-nav a:active {
    outline: 0 !important;
    box-shadow: none !important;
}

/* The old KingSoft child theme had only the two useful views: grid and list. */
.woocommerce .before-loop-wrapper .grid_list_nav #columns4 {
    display: none !important;
}

@media (max-width: 991px) {
    .single-product .kingsoft-related-products .kingsoft-related-grid {
        flex-wrap: wrap !important;
    }

    .single-product .kingsoft-related-products .kingsoft-related-card {
        flex: 0 0 calc(50% - 15px) !important;
        width: calc(50% - 15px) !important;
    }
}

@media (max-width: 599px) {
    .single-product .kingsoft-related-products .kingsoft-related-card {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}