/**
 * Darealmop_ProductLabels — corner label overlay skeleton.
 *
 * STRUCTURE ONLY. This stylesheet positions the badge overlay and pins each
 * label to one of the four corners (position / inset / flex / gap / radius /
 * padding). It ships NO appearance: every colour, font, border and shadow is a
 * `--dm-product-label-*` custom property with NO literal fallback, so on a bare
 * theme the badges are laid out but unpainted, and the consuming (Hyvä-style)
 * theme owns the entire look.
 *
 * Per-label accent tokens fall through to the module-wide label tokens, e.g.
 *   --dm-product-label-sale-bg  ->  --dm-product-label-bg
 * so a theme can tint one caption or all at once. The caption slug (neu, sale,
 * new, …) is emitted as a `dm-product-label--<slug>` class alongside the corner
 * class `dm-product-label--<top-left|top-right|bottom-left|bottom-right>`. A
 * theme adds its own `.dm-product-label--<slug>` rule for captions not listed
 * below.
 *
 * The overlay fills its nearest positioned ancestor (the product media/gallery
 * on the PDP, or the card media box on a PLP). A theme that wraps this template
 * should give that ancestor `position: relative`.
 */

.dm-product-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--dm-product-label-z, 2);
    font-family: var(--dm-product-label-font);
    color: var(--dm-product-label-text);
}

/* ═══════════════════════════════════════════════════════════════
   CORNER STACKS — each corner is an absolutely-pinned flex column so
   several labels sharing a corner stack in priority order.
   ═════════════════════════════════════════════════════════════ */

.dm-product-labels__corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: var(--dm-product-label-stack-gap, 4px);
    max-width: calc(100% - (2 * var(--dm-product-label-inset, 8px)));
}

.dm-product-labels__corner--top-left {
    top: var(--dm-product-label-inset, 8px);
    left: var(--dm-product-label-inset, 8px);
    align-items: flex-start;
}

.dm-product-labels__corner--top-right {
    top: var(--dm-product-label-inset, 8px);
    right: var(--dm-product-label-inset, 8px);
    align-items: flex-end;
}

.dm-product-labels__corner--bottom-left {
    bottom: var(--dm-product-label-inset, 8px);
    left: var(--dm-product-label-inset, 8px);
    align-items: flex-start;
}

.dm-product-labels__corner--bottom-right {
    bottom: var(--dm-product-label-inset, 8px);
    right: var(--dm-product-label-inset, 8px);
    align-items: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE — the label pill itself. Colour / shape via tokens only.
   ═════════════════════════════════════════════════════════════ */

.dm-product-label {
    display: inline-flex;
    align-items: center;
    padding: var(--dm-product-label-padding, 2px 8px);
    border-radius: var(--dm-product-label-radius);
    border: var(--dm-product-label-border);
    background: var(--dm-product-label-bg);
    color: var(--dm-product-label-text);
    font-size: var(--dm-product-label-font-size);
    font-weight: var(--dm-product-label-font-weight);
    line-height: var(--dm-product-label-line-height, 1.3);
    letter-spacing: var(--dm-product-label-letter-spacing);
    text-transform: var(--dm-product-label-text-transform);
    box-shadow: var(--dm-product-label-shadow);
    pointer-events: auto;
}

/* ── Per-caption accents (fall through to the module-wide label bg) ─────────
   Illustrative slugs; a theme adds more `.dm-product-label--<slug>` rules as
   it introduces new captions. */

.dm-product-label--neu {
    background: var(--dm-product-label-neu-bg, var(--dm-product-label-bg));
    color: var(--dm-product-label-neu-text, var(--dm-product-label-text));
}

.dm-product-label--new {
    background: var(--dm-product-label-new-bg, var(--dm-product-label-bg));
    color: var(--dm-product-label-new-text, var(--dm-product-label-text));
}

.dm-product-label--sale {
    background: var(--dm-product-label-sale-bg, var(--dm-product-label-bg));
    color: var(--dm-product-label-sale-text, var(--dm-product-label-text));
}

.dm-product-label--angebot {
    background: var(--dm-product-label-angebot-bg, var(--dm-product-label-bg));
    color: var(--dm-product-label-angebot-text, var(--dm-product-label-text));
}

.dm-product-label--ausverkauft {
    background: var(--dm-product-label-ausverkauft-bg, var(--dm-product-label-bg));
    color: var(--dm-product-label-ausverkauft-text, var(--dm-product-label-text));
}

/* ═══════════════════════════════════════════════════════════════
   CARD VARIANT — compact badges for a PLP / grid item, falling through
   to the base badge tokens.
   ═════════════════════════════════════════════════════════════ */

.dm-product-labels--card .dm-product-labels__corner {
    gap: var(--dm-product-label-card-stack-gap, var(--dm-product-label-stack-gap, 4px));
}

.dm-product-labels--card .dm-product-label {
    padding: var(--dm-product-label-card-padding, var(--dm-product-label-padding, 1px 6px));
    font-size: var(--dm-product-label-card-font-size, var(--dm-product-label-font-size));
}