/* Ensure the product container is positioned relative */
.woocommerce ul.products li.product {
    position: relative;
}

/* Style the finance option to overlay the product image */
.finance-option {
    position: absolute;
    bottom: 0; /* Place at the bottom of the image */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with 50% opacity */
    padding: 10px 5px; /* Minimal padding around the content */
    text-align: center;
    font-size: 14px; /* Font size 14px */
    color: #fff; /* White text color */
    border-radius: 0px;
    box-sizing: border-box; /* Ensure padding and border are included in width */
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 5px; /* Space between items */
    border: none; /* No border */
}

/* Style the Klarna logo to be very small while maintaining proportions */
.finance-option .klarna-logo {
    max-width: 30px; /* Set a maximum width */
    max-height: 15px; /* Set a maximum height */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Allow width to scale with height */
}

/* Ensure the price color remains unchanged and align text inline */
.finance-option p {
    color: inherit; /* Inherit color from parent to maintain price color */
    margin: 0; /* Remove default margin for inline alignment */
    display: inline; /* Make sure the text is inline */
}

/* Add space between text and price */
.finance-option .finance-text {
    display: flex;
    align-items: center; /* Center text elements vertically */
    gap: 5px; /* Space between text and price */
}
.product-views {
    font-size: 14px;
    color: #666; /* Default text color for the rest of the text */
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with 70% opacity */
    padding: 5px;
    border-radius: 3px;
    display: inline-block;

/* Target the 'Sold out' label only on product archive pages */
.archive .out-of-stock.product-label {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.0); /* Scale by 100% */
    font-size: 1.5em; /* Adjust font size if needed */
    text-align: center;
}