/* 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 */
}

/* ===========================================================================
   LABEL WRAPPING FIX  (20 August 2026)

   The label is centre-anchored over the product image with AUTO width and no
   white-space rule, so on a narrow card it wraps and grows downward until it
   swallows the artwork. Measured on the live category page at 390px:
   "SALE - 83% OFF" wrapped to FOUR lines, 69 x 73px over a 108px image,
   covering 43% of the cover art. At desktop widths it still wrapped to two
   lines (110 x 39 over a 190px image = 12%) on any card under about 210px,
   which is every 4-across category grid on a 1280-1366px laptop.

   This is a text-wrapping bug, not a positioning bug. Keeping the label on one
   line is the whole fix; the smaller type and hidden icon below 768px just
   keep that one line short enough to sit inside a 108px card.

   Applies site-wide, all verified at 390px: category, shop, search, vendor
   stores, tag archives, related products and the sale landing pages.
   Affects .sale, .vendor and .academic alike.

   NOTE: theme.css also carries .custom-label { padding-top:1px !important;
   margin-top:15px !important } so the padding-top below is overridden to 1px.
   That is intentional. margin-top:15px is what lines the strip up flush with
   the top edge 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;
    }
}