/* ============================================
   Base positioning for label containers
   ============================================ */

/* PLP: Product card image wrapper */
.product.photo.product-item-photo {
    position: relative;
    display: block;
}

/* PLP: Image container/wrapper */
.product-image-wrapper,
.product-image-container {
    position: relative;
}

/* PDP: Gallery needs relative for label positioning */
#gallery {
    position: relative;
}

/* ============================================
   Label position classes
   ============================================ */

.top-left {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    z-index: 10;
    max-width: 100px;
}

.top-right {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    z-index: 10;
    max-width: 100px;
}

.lower-left {
    position: absolute;
    bottom: 0.375rem;
    left: 0.375rem;
    z-index: 10;
    max-width: 100px;
}

.lower-right {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 10;
    max-width: 100px;
}

/* ============================================
   PDP specific adjustments (product view)
   ============================================ */

.top-left.product,
.top-right.product,
.lower-left.product,
.lower-right.product {
    max-width: 120px;
}

/* Adjust bottom labels to clear thumbnails on PDP */
.lower-left.product,
.lower-right.product {
    bottom: 7rem; /* ~112px */
}

/* ============================================
   PLP specific adjustments (category listing)
   ============================================ */

.top-left.category,
.top-right.category,
.lower-left.category,
.lower-right.category {
    max-width: 80px;
}

.top-right.category {
    top: -0.375rem;
    right: -0.375rem;
}
.top-left.category {
    top: -0.375rem;
    left: -0.375rem;
}
.lower-left.category {
    bottom: -0.375rem;
    left: -0.375rem;
}
.lower-right.category {
    bottom: -0.375rem;
    right: -0.375rem;
}

/* ============================================
   Labels overlay container (for PDP)
   ============================================ */

.product-labels-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.product-labels-overlay > div {
    pointer-events: auto;
}

.product-image-photo {
    width: 100%;
    height: auto;
}

/* ============================================
   Discount percentage label
   Uses Hyva CSS variable --color-discount
   ============================================ */

.discount-amount-label {
    position: absolute;
    z-index: 20;
    top: 0.375rem;
    left: 0.375rem;
    border-radius: 0.375rem;
    padding: 0.375rem 1rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    background-color: var(--color-discount, red);
}

.product.card .discount-amount-label {
    top: -0.375rem;
    left: -0.375rem;
}

/* ============================================
   Free shipping badge
   ============================================ */

.free-shipping-label {
    position: absolute;
    z-index: 20;
    bottom: 0.375rem;
    right: 0.375rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.25;
    padding: 0.375rem 1rem;
    background-color: var(--color-success, green);
}

.product.card .free-shipping-label {
    bottom: -0.375rem;
    right: -0.375rem;
}

/* ============================================
   Responsive adjustments
   ============================================ */

@media (max-width: 640px) {
    .top-left,
    .top-right,
    .lower-left,
    .lower-right {
        max-width: 70px;
    }

    .top-left img,
    .top-right img,
    .lower-left img,
    .lower-right img {
        width: 4rem;
        height: auto;
    }

    .discount-amount-label {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        top: 1.5rem;
    }

    .free-shipping-label {
        width: 3rem;
        height: 3rem;
        font-size: 0.625rem;
    }
}