/* Ensure product items have relative positioning for absolute label placement */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    position: relative;
}

/* Base styles for custom labels */
.custom-label {
    position: absolute; /* Position the label absolutely within the product item */
    z-index: 10; /* Ensure the label appears above other elements */
    top: 0px; /* Move the label down from the top */
    left: 50%; /* Center the label horizontally */
    transform: translateX(-50%); /* Center horizontally only */
    margin-bottom: 0; /* Reset margin */
    background-color: #2a2a2a; /* Medium dark background that works with dark theme */
    border-radius: 3px; /* More minimal radius */
    padding: 0.3rem 0.8rem; /* Maintain padding for readability */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    margin-top: 10px; /* Maintain vertical position */
    font-weight: 500; /* Medium weight for cleaner look */
    color: #ffffff; /* White text for best contrast */
    border: none; /* No border for cleaner matte look */
    letter-spacing: 0; /* Normal letter spacing */
    text-transform: uppercase; /* Keep uppercase for distinction */
    font-size: 0.7rem; /* Smaller text */
}

/* Add spacing between icon and text */
.custom-label i {
    margin-right: 5px; /* Add space between icon and text */
}

/* Sale label - matte red variant */
.custom-label.sale {
    background-color: #d32f2f; /* Flat, matte red that stands out but isn't glossy */
    color: #ffffff; /* White text */
}

/* Vendor label - matte orange variant */
.custom-label.vendor {
    background-color: #e65100; /* Flat, matte orange that stands out but isn't glossy */
    color: #ffffff; /* White text */
}

/* Academic label - matte blue variant */
.custom-label.academic {
    background-color: #1976d2; /* Flat, matte blue that stands out but isn't glossy */
    color: #ffffff; /* White text */
}

/*
 * Sale, vendor and academic labels stay on one line. Left to wrap, a label on
 * a narrow card grew downward and covered the cover art. Below 768px the type
 * is smaller and the icon hidden, so the single line still fits a small card.
 *
 * theme.css also sets padding-top: 1px and margin-top: 15px on .custom-label
 * with !important, so the padding-top and margin-top in this file never apply.
 * The 15px margin lines the label up with the top of the artwork: do not
 * override it.
 */

.custom-label {
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* The card, and therefore the artwork, shrinks with the viewport, so a fixed
       font size stops fitting at the bottom of the range. At 320px the artwork is
       only 73px wide and a 0.6rem label rendered 87px, wider than the image it sits
       on. Both values scale with the viewport and are capped so nothing changes
       between roughly 380px and 768px. */
    .custom-label {
        font-size: clamp(0.46rem, 2.4vw, 0.6rem);
        padding: 2px min(8px, 1.8vw) 3px;
        letter-spacing: 0.02em;
    }
    .custom-label i {
        display: none;
    }
}