/**
 * Product Labels - Frontend Styles
 * @author Thecon
 */

/* Wrapper - absolute overlay on product image */
.thproductlabel-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

/* Hide listing labels until JS repositions them (prevents flash) */
.thproductlabel-product_listing {
    visibility: hidden;
}

.thproductlabel-product_listing.thproductlabel-ready {
    visibility: visible;
}

/* Product page labels are visible immediately */
.thproductlabel-product_page {
    visibility: visible;
}

/* Position groups - each corner gets a flex column */
.thproductlabel-group {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

/* GASTRO-MOD 2026-05-13: !important pe top ca sa fie aliniat cu badge-ul de reducere (.gp-product-flags-aligned, vezi theme custom.css). Right pe top-right pastrat 50px ca sa nu se suprapuna cu butonul de favorite. */
.thproductlabel-group-top-left {
    top: 14px !important;
    left: 10px !important;
    align-items: flex-start;
}

.thproductlabel-group-top-right {
    top: 14px !important;
    right: 50px;
    align-items: flex-end;
}

.thproductlabel-group-bottom-left {
    bottom: 10px;
    left: 10px;
    align-items: flex-start;
}

.thproductlabel-group-bottom-right {
    bottom: 10px;
    right: 10px;
    align-items: flex-end;
}

/* Individual label */
.thproductlabel {
    display: inline-block;
    pointer-events: auto;
    line-height: 1;
    white-space: nowrap;
}

/* Image labels */
.thproductlabel-img {
    height: auto;
    display: block;
}

/* Text labels */
.thproductlabel-text {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Ensure parent containers are positioned for absolute children */
.thumbnail-container {
    position: relative;
}

.images-container {
    position: relative;
}

/* Custom themes (gastro, vitrine) */
.product-image-container {
    position: relative;
    display: block;
}

/* Inline <a> wrappers (default for anchor tags) collapse the image-container
   to the line-height, breaking bottom-positioned labels. Force block layout
   so the positioning context matches the actual image area. */
.product-image-container > .product-image-link,
.product-image-container > a {
    display: block;
}

.product__images {
    position: relative;
}

/* ============ RESPONSIVE - Tablet ============ */
@media (max-width: 1199px) {
    .thproductlabel-group-top-left {
        top: 8px;
        left: 8px;
    }

    .thproductlabel-group-top-right {
        top: 8px;
        right: 46px;
    }

    .thproductlabel-group-bottom-left {
        bottom: 8px;
        left: 8px;
    }

    .thproductlabel-group-bottom-right {
        bottom: 8px;
        right: 8px;
    }

    .thproductlabel-text {
        font-size: 13px !important;
    }
}

/* ============ RESPONSIVE - Mobile ============ */
@media (max-width: 767px) {
    .thproductlabel-group-top-left {
        top: 6px;
        left: 6px;
    }

    .thproductlabel-group-top-right {
        top: 6px;
        right: 42px;
    }

    .thproductlabel-group-bottom-left {
        bottom: 6px;
        left: 6px;
    }

    .thproductlabel-group-bottom-right {
        bottom: 6px;
        right: 6px;
    }

    .thproductlabel-group {
        gap: 3px;
    }

    .thproductlabel-text {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
}