/* Product Flag Display on Product Cards - Completely Transparent, No Container */
.aptm-product-flag {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: block !important;
    object-fit: contain !important;
}

/* Ensure product card has relative positioning */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative !important;
}

/* Ensure product image container has relative positioning for flag placement */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link {
    position: relative !important;
    display: block;
}

/* Position flag inside product image area - absolutely positioned within the product link/image container */
.woocommerce ul.products li.product .aptm-product-flag,
.woocommerce-page ul.products li.product .aptm-product-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}

/* Make sure flag appears inside the image container, not outside */
.woocommerce ul.products li.product .woocommerce-loop-product__link .aptm-product-flag,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .aptm-product-flag,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link .aptm-product-flag,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link .aptm-product-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}

/* Make product images have relative positioning so flag can be absolutely positioned inside */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    position: relative;
    display: block;
}

/* Alternative: Position flag relative to product image wrapper if theme uses wrapper */
.woocommerce ul.products li.product .product-image-wrapper,
.woocommerce ul.products li.product .wp-post-image,
.woocommerce-page ul.products li.product .product-image-wrapper,
.woocommerce-page ul.products li.product .wp-post-image {
    position: relative;
}

/* Single product page flag - inside product gallery */
.woocommerce div.product .aptm-product-flag.aptm-single-flag {
    position: absolute !important;
    top: 40px !important;
    left: 40px !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Ensure product gallery has relative positioning */
.woocommerce div.product .product .images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image {
    position: relative !important;
}

/* Ensure flag appears inside product image by positioning it within the product link */
.woocommerce ul.products li.product .aptm-product-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}

/* For themes that wrap images differently */
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product .wp-post-image {
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Shop/Archive pages - smaller flags on mobile */
    .woocommerce ul.products li.product .aptm-product-flag,
    .woocommerce-page ul.products li.product .aptm-product-flag {
        top: 6px !important;
        left: 6px !important;
    }
    
    /* Single Product Page only - larger flags on mobile */
    .woocommerce div.product .aptm-product-flag.aptm-single-flag {
        top: 20px !important;
        left: 20px !important;
    }
}