/* styles.css */

/* Common styles for overlay */
.prod-overlay {
    position: absolute;
    z-index: 1010;
    text-align: left;
    right: 3px;
    top: 0;
    /* Add other common styles here */
}

/* Set z-index for standard single product pages on the gallery main image box, so doesn't go on top of menues, etc. */
.woocommerce-product-gallery__wrapper .prod-overlay {
    z-index: 10;
    /* Add other common styles here */
}

/* Specific styles for text overlay */
.prod-overlay-text {
    /* Adjust position */
    top: 0.3em;
    left: 0.3em;
    /* Add specific styles for text overlay */
}

/* Specific styles for overlay label */
.prod-overlay-label {
    position: absolute;
    top: 2px;
    left: 0;
    background-color: #0088e2; /* Green background */
    padding: 5px 10px; /* Adjust padding as needed */
    border-radius: 5px; /* Adjust border radius as needed */
    color: white;
    font-size: 14px;
    font-weight: bold;
    transform: none; /* Reset rotation */
    line-height: 1em;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
    max-width: 99%;
    /* Add specific styles for overlay label */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); /* Add shadow */
}

/* Specific styles for overlay label in .columns-4 AND when using avia ALB produxt slider */
.columns-4 .prod-overlay-label, .avia-content-slider-inner .prod-overlay-label{
    font-size: 11px;
    line-height: 1em;
    /* Add specific styles for overlay label in .columns-4 */
}