/**
 * "Naujiena" / "Išpardavimas" product labels — solidnewlabel module.
 *
 * div-based markup:
 *   <div class="product-flags js-product-flags">
 *     <div class="product-flag new-label">Naujiena</div>
 *     <div class="product-flag on-sale">Išpardavimas</div>
 *   </div>
 *
 * Labels overlay the product image (top-left), stacked vertically. "Naujiena"
 * uses the shop's primary blue (#83a7d4); "Išpardavimas" a warm coral (#e07a5f).
 * Responsive.
 */

/* --- Container: overlay on the image, top-left, vertical stack --- */
.product-flags {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: auto;
    margin: 0;
    gap: 4px; /* 3–5px between the two labels */
    pointer-events: none;
}

/* Product detail page: anchor the overlay to the image container */
.site-product-page .atplast-images-container-outer {
    position: relative;
}

/* --- Shared label look --- */
.product-flags .product-flag.new-label,
.product-flags .product-flag.on-sale {
    display: inline-block;
    width: -webkit-fit-content;
    width: fit-content;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0.35em 0.7em;
    font-family: 'Outfit-Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: clamp(0.6875rem, 0.6rem + 0.4vw, 0.8125rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(37, 37, 37, 0.18);
}

/* "Naujiena" — shop primary blue */
.product-flags .product-flag.new-label {
    background-color: #83a7d4;
}

/* "Išpardavimas" — warm coral (warmer, complements the soft blue) */
.product-flags .product-flag.on-sale {
    background-color: #e07a5f;
}

/* --- Small screens --- */
@media (max-width: 575.98px) {
    .product-flags {
        top: 0.4375rem;
        left: 0.4375rem;
    }

    .product-flags .product-flag.new-label,
    .product-flags .product-flag.on-sale {
        padding: 0.3em 0.55em;
    }
}