/* Category Page Specific CSS */

/* Remove padding from image wrapper globally */
.woocommerce ul.products li.product .kwt-image-wrap.kwt-image-full.kwt-image-_debf61-d8,
.kwt-image-wrap.kwt-image-full.kwt-image-_debf61-d8 {
    padding: 0;
}

/* Apply padding and grey background only to out-of-stock images */
.out-of-stock-parent .woocommerce-loop-image-link img {
    padding-top: 10px;
    padding-bottom: 5px;
    box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
    background-color: rgba(210, 210, 210, 0.85); /* Apply grey overlay background only to out-of-stock images */
}

/* Ensure the container covers the grey background and adjusts padding only for out-of-stock images */
.kt-inside-inner-col:has(.out-of-stock-parent) {
    padding: 0 !important; /* Remove padding for the container */
}

.kt-inside-inner-col:has(.out-of-stock-parent) .kwt-image-wrap {
    padding: 0px 0.5rem !important; /* 0px top/bottom, 0.5rem left/right */
    background-color: rgba(210, 210, 210, 0.85); /* Apply grey overlay background */
}



/* Ensure the image container is correctly positioned */
.out-of-stock-parent {
    position: relative;
}

/* Overlay for out of stock items */
.out-of-stock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(210, 210, 210, 0.85); /* Reverted grey overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    text-align: center;
    border-radius: 0 !important; /* Ensure no rounded corners */
}

/* Out of stock text styling */
.out-of-stock-text {
    font-size: 28px; /* Slightly larger font size for desktop */
    font-weight: bold;
    color: black; /* Black text color */
    text-transform: uppercase; /* Ensure all text is uppercase */
    text-shadow: -1px -1px 0 #fff,  
                 1px -1px 0 #fff,  
                 -1px 1px 0 #fff,  
                 1px 1px 0 #fff; /* Smaller white outline */
    margin-bottom: 4px; /* Decreased spacing between the text and subtext */
    margin-top: 40px; /* Moves the text down on desktop */
}

/* Out of stock subtext styling */
.out-of-stock-subtext {
    font-size: 14px; /* Larger font size for better readability */
    color: white; /* White text color */
    background-color: black; /* Black background */
    border-radius: 5px; /* Optional rounded corners for the subtext */
    padding: 6px 10px; /* Small padding on all sides */
    margin-top: 2px; /* Decreased spacing between the text and subtext */
    margin-left: 5px; /* Added left margin */
    margin-right: 5px; /* Added right margin */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .out-of-stock-text {
        font-size: 18px; /* Adjusted font size for mobile */
        padding: 4px 8px; /* Adjusted padding for mobile */
        margin-bottom: 4px; /* Decreased spacing between the text and subtext */
        margin-top: 50px; /* Adjusted to move text slightly down but less than before */
    }

    .out-of-stock-subtext {
        font-size: 12px; /* Slightly smaller subtext for very small screens */
        padding: 4px 8px; /* Further reduce padding */
        margin-top: -35px; /* Moved up further on mobile to avoid cutting off */
        margin-left: 5px; /* Ensure margin on smaller screens */
        margin-right: 5px; /* Ensure margin on smaller screens */
    }
}