/* Ostoskorin cross-sell-tuotteet modaalina, teeman omilla tuotekorteilla */

/* WooCommerce Blocksin natiivi cross-sell-lohko piilotetaan — korvattu alla olevalla modaalilla */
.wp-block-woocommerce-cart-cross-sells-block {
    display: none !important;
}

#cosmetsky-cs-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999991;
    width: 92%;
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    padding: 32px 24px 24px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

#cosmetsky-cs-modal[hidden] {
    display: none;
}

.cosmetsky-cs-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999990;
}

.cosmetsky-cs-close {
    position: fixed;
    top: calc(7.5vh - 4px);
    right: calc(4% + 4px);
    z-index: 999992;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@media (min-width: 968px) {
    .cosmetsky-cs-close {
        top: calc(50% - 42.5vh - 4px);
        right: calc(50% - 450px - 4px);
    }
}

/* Ulkoasu (väri, fontti, pyöristys) peritään teeman .button-luokasta — tässä vain sijainti */
.cosmetsky-cs-reopen {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999989;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.cosmetsky-cs-backdrop[hidden],
.cosmetsky-cs-close[hidden],
.cosmetsky-cs-reopen[hidden] {
    display: none;
}