/**
 * Copyright © MageWeb. All rights reserved.
 * See LICENSE.txt for license details.
 *
 * Product Labels. Plain CSS shared by Hyvä and Luma; restyle with the --mw-pl-* custom properties.
 */
.mw-pl {
    --mw-pl-scale: 1;
    --mw-pl-gap: 6px;
    --mw-pl-image-max: 96px;
    position: relative;
    display: block;
}

.mw-pl--listing {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.mw-pl--overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    --mw-pl-scale: 1.15;
    --mw-pl-image-max: 140px;
}

/* Product page labels are a little larger than on product cards. */
.mw-pl--gallery {
    --mw-pl-scale: 1.15;
    --mw-pl-image-max: 140px;
}

.mw-pl__corner {
    --mw-pl-dy: calc(var(--mw-pl-offset-y, 10px) * var(--mw-pl-scale));
    --mw-pl-dx: calc(var(--mw-pl-offset-x, 10px) * var(--mw-pl-scale));
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--mw-pl-gap);
    max-width: calc(100% - 2 * var(--mw-pl-dx));
    pointer-events: none;
}

/* Nine positions: rows top / middle / bottom, columns left / centre / right. */
.mw-pl__corner--top_left,
.mw-pl__corner--top_center,
.mw-pl__corner--top_right { top: var(--mw-pl-dy); }
.mw-pl__corner--bottom_left,
.mw-pl__corner--bottom_center,
.mw-pl__corner--bottom_right { bottom: var(--mw-pl-dy); flex-direction: column-reverse; }
.mw-pl__corner--middle_left,
.mw-pl__corner--middle_center,
.mw-pl__corner--middle_right { top: 50%; }
.mw-pl__corner--top_left,
.mw-pl__corner--middle_left,
.mw-pl__corner--bottom_left { left: var(--mw-pl-dx); align-items: flex-start; }
.mw-pl__corner--top_right,
.mw-pl__corner--middle_right,
.mw-pl__corner--bottom_right { right: var(--mw-pl-dx); align-items: flex-end; }
.mw-pl__corner--top_center,
.mw-pl__corner--middle_center,
.mw-pl__corner--bottom_center { left: 50%; align-items: center; }
.mw-pl__corner--top_center,
.mw-pl__corner--bottom_center { transform: translateX(-50%); }
.mw-pl__corner--middle_left,
.mw-pl__corner--middle_right { transform: translateY(-50%); }
.mw-pl__corner--middle_center { transform: translate(-50%, -50%); }

/* Luma's product gallery has its thumbnail strip inside the same box: keep bottom labels above it. */
.mw-pl--gallery.mw-pl--theme-luma .mw-pl__corner--bottom_left,
.mw-pl--gallery.mw-pl--theme-luma .mw-pl__corner--bottom_center,
.mw-pl--gallery.mw-pl--theme-luma .mw-pl__corner--bottom_right {
    bottom: calc(var(--mw-pl-dy) + var(--mw-pl-luma-thumbs, 125px));
}

@media (max-width: 767px) {
    .mw-pl--gallery.mw-pl--theme-luma .mw-pl__corner--bottom_left,
    .mw-pl--gallery.mw-pl--theme-luma .mw-pl__corner--bottom_center,
    .mw-pl--gallery.mw-pl--theme-luma .mw-pl__corner--bottom_right {
        bottom: calc(var(--mw-pl-dy) + var(--mw-pl-luma-dots, 40px));
    }
}

.mw-pl__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    padding: calc(var(--mw-pl-pt, 4px) * var(--mw-pl-scale)) calc(var(--mw-pl-pr, 9px) * var(--mw-pl-scale))
        calc(var(--mw-pl-pb, 4px) * var(--mw-pl-scale)) calc(var(--mw-pl-pl, 9px) * var(--mw-pl-scale));
    border-radius: 0;
    background: var(--mw-pl-bg, #111827);
    color: var(--mw-pl-fg, #FFFFFF);
    font-size: calc(var(--mw-pl-fs, 12px) * var(--mw-pl-scale));
    font-weight: var(--mw-pl-fw, 700);
    letter-spacing: var(--mw-pl-ls, 0);
    text-transform: var(--mw-pl-tt, none);
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.mw-pl__badge--rounded { border-radius: calc(var(--mw-pl-r, 4px) * var(--mw-pl-scale)); }

.mw-pl__badge--pill { border-radius: 999px; }

.mw-pl__badge--circle {
    width: calc(var(--mw-pl-fs, 12px) * 4.7 * var(--mw-pl-scale));
    height: calc(var(--mw-pl-fs, 12px) * 4.7 * var(--mw-pl-scale));
    padding: 4px;
    border-radius: 50%;
    white-space: normal;
}

.mw-pl__image {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--mw-pl-image-max);
    max-height: var(--mw-pl-image-max);
}

@media print {
    .mw-pl__corner { display: none; }
}