/**
 * Product Icons Manager — Front-Office Styles
 *
 * Provides overlay positioning for icon images on product thumbnails
 * and product detail cover images.
 *
 * IMPORTANT: The parent container of the hook output must have
 * `position: relative` for the absolute positioning to work.
 * This stylesheet adds it to common PrestaShop theme containers.
 */

/* ─────────────────────────────────────────────
   Parent container — ensure position: relative
   ───────────────────────────────────────────── */
.product-cover,
.thumbnail-top,
a.thumbnail.product-thumbnail,
.product-miniature .thumbnail-container {
    position: relative;
}

/* ─────────────────────────────────────────────
   Overlay wrapper
   ───────────────────────────────────────────── */
.product-icon-overlay {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    line-height: 0;
}

.product-icon-overlay img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    mix-blend-mode: multiply;
}

.product-icon-overlay img {
  background: none !important;
}

/* ─────────────────────────────────────────────
   Position variants
   ───────────────────────────────────────────── */
.product-icon-overlay.top-left {
    top: 5px;
    left: 5px;
}

.product-icon-overlay.top-right {
    top: 5px;
    right: 5px;
}

.product-icon-overlay.bottom-left {
    bottom: 5px;
    left: 5px;
}

.product-icon-overlay.bottom-right {
    bottom: 5px;
    right: 5px;
}

/* ─────────────────────────────────────────────
   Multiple icons stacking
   When display mode = multiple and multiple icons
   match, they stack vertically from their anchor corner.
   ───────────────────────────────────────────── */
.product-icon-overlay.top-left + .product-icon-overlay.top-left,
.product-icon-overlay.top-right + .product-icon-overlay.top-right {
    margin-top: 4px;
}

.product-icon-overlay.bottom-left + .product-icon-overlay.bottom-left,
.product-icon-overlay.bottom-right + .product-icon-overlay.bottom-right {
    margin-bottom: 4px;
}

/* ─────────────────────────────────────────────
   Responsive scaling
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .product-icon-overlay {
        transform: scale(0.75);
        transform-origin: top right;
    }
    .product-icon-overlay.top-left,
    .product-icon-overlay.bottom-left {
        transform-origin: top left;
    }
    .product-icon-overlay.bottom-left,
    .product-icon-overlay.bottom-right {
        transform-origin: bottom left;
    }
    .product-icon-overlay.bottom-right {
        transform-origin: bottom right;
    }
}

@media (max-width: 480px) {
    .product-icon-overlay {
        transform: scale(0.6);
    }
}