/*
 * Wimakeit_ProductLabel - theme-agnostic label styles.
 *
 * No framework, no build step: plain CSS with custom properties, so it works identically
 * on Luma, Breeze and Hyva. The Hyva companion adds Tailwind sources on top for
 * integrators who want to restyle with utilities.
 *
 * The sizing model is the important part. `container-type: inline-size` on the anchor
 * means every measurement below is relative to the IMAGE, not to the viewport. One rule
 * then produces a correctly proportioned badge in a 4-column desktop grid, a 2-column
 * mobile grid, a 700px product page image and a 64px mini-cart thumbnail - with no media
 * queries to keep in sync.
 */

.wm-label-anchor {
    position: relative;
    display: block;
    container-type: inline-size;

    /*
     * The anchor slips between the card and its <img>, so it inherits the job of being the
     * sized box the image measures itself against. Without this, a card built as
     * "display:flex; aspect-ratio:1" with "img { height:100% }" — a very common Hyva card —
     * collapses to nothing: the anchor takes its height from the image, the image takes its
     * height from the anchor, and both settle on zero.
     *
     * height:100% is inert in normal flow, where the parent has no definite height, so this
     * only bites where a card really does size its image box.
     */
    align-self: stretch;
    width: 100%;
    height: 100%;
}

/* The image fills the anchor, whatever the theme asked of it originally. */
.wm-label-anchor > img {
    display: block;
}

.wm-label-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Never eat a tap meant for the product link. */
    pointer-events: none;
}

.wm-label {
    position: absolute;
    display: grid;
    place-items: center;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    user-select: none;

    /* cqi = 1% of the container's inline size, i.e. of the image width. */
    --wm-label-basis: clamp(2.25rem, 26cqi, 6rem);

    inline-size: calc(var(--wm-label-basis) * var(--wm-label-scale, 1));
    aspect-ratio: 1;
    color: var(--wm-label-fg, #fff);
    opacity: var(--wm-label-opacity, 1);
    z-index: var(--wm-label-z, 10);
}

.wm-label__shape {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

.wm-label__text {
    position: relative;
    z-index: 1;
    padding-inline: 0.25em;
    /*
     * The size ladder has to reach the text, not just the box. Shapes sized by their content
     * — pill, text-only — take their width from the font, so leaving this clamp unscaled made
     * xs, sm and lg render within a few pixels of each other.
     */
    font-size: calc(clamp(0.5625rem, 7cqi, 1.125rem) * var(--wm-label-scale, 1));
    rotate: var(--wm-label-rotate, 0deg);
    text-wrap: balance;
}

/* The readable sentence for assistive tech. Visually hidden, never display:none, which
   would remove it from the accessibility tree as well. */
.wm-label__sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wm-label__link {
    display: contents;
    pointer-events: auto;
}

/*
 * Positions use logical properties throughout, so a "top left" label automatically
 * becomes top-right in an RTL store view with no extra configuration.
 *
 * Every position falls back to a small gutter rather than to 0: a pill or a plain text
 * badge flush against the image edge reads as a rendering accident. Corner ribbons are the
 * exception — their whole shape is the corner — so they zero it out below.
 */
.wm-label {
    --wm-label-gutter: .5rem;
}

.wm-label--ribbon-corner,
.wm-label--triangle-corner {
    --wm-label-gutter: 0;
}
.wm-label--top-left {
    inset-block-start: var(--wm-label-offset-y, var(--wm-label-gutter));
    inset-inline-start: var(--wm-label-offset-x, var(--wm-label-gutter));
}

.wm-label--top-center {
    inset-block-start: var(--wm-label-offset-y, var(--wm-label-gutter));
    inset-inline: 0;
    margin-inline: auto;
}

.wm-label--top-right {
    inset-block-start: var(--wm-label-offset-y, var(--wm-label-gutter));
    inset-inline-end: var(--wm-label-offset-x, var(--wm-label-gutter));
}

.wm-label--middle-left {
    inset-block: 0;
    margin-block: auto;
    inset-inline-start: var(--wm-label-offset-x, var(--wm-label-gutter));
}

.wm-label--middle-center {
    inset-block: 0;
    inset-inline: 0;
    margin: auto;
}

.wm-label--middle-right {
    inset-block: 0;
    margin-block: auto;
    inset-inline-end: var(--wm-label-offset-x, var(--wm-label-gutter));
}

.wm-label--bottom-left {
    inset-block-end: var(--wm-label-offset-y, var(--wm-label-gutter));
    inset-inline-start: var(--wm-label-offset-x, var(--wm-label-gutter));
}

.wm-label--bottom-center {
    inset-block-end: var(--wm-label-offset-y, var(--wm-label-gutter));
    inset-inline: 0;
    margin-inline: auto;
}

.wm-label--bottom-right {
    inset-block-end: var(--wm-label-offset-y, var(--wm-label-gutter));
    inset-inline-end: var(--wm-label-offset-x, var(--wm-label-gutter));
}

/* In-flow variants, for labels placed next to the product name rather than over the image. */
.wm-label--content-before,
.wm-label--content-after {
    position: static;
    display: inline-grid;
    vertical-align: middle;
}

/* Size steps, applied on top of the container-relative basis rather than replacing it,
   so a "large" badge is still proportional to its image. */
.wm-label--xs { --wm-label-scale: 0.6; }
.wm-label--sm { --wm-label-scale: 0.8; }
.wm-label--md { --wm-label-scale: 1; }
.wm-label--lg { --wm-label-scale: 1.25; }
.wm-label--xl { --wm-label-scale: 1.5; }

/* Shapes that read as a band rather than a badge are wider than tall. */
.wm-label--ribbon-band,
.wm-label--rectangle,
.wm-label--rounded,
.wm-label--pill,
.wm-label--text-only {
    aspect-ratio: auto;
    inline-size: auto;
    max-inline-size: 90cqi;
    min-block-size: calc(var(--wm-label-basis) * var(--wm-label-scale, 1) * 0.42);
    padding-inline: 0.6em;
    padding-block: 0.35em;
    border-radius: var(--wm-label-radius, 0);
}

.wm-label--text-only {
    background: transparent;
    color: var(--wm-label-bg, #e11d48);
    padding: 0;
    min-block-size: 0;
}

.wm-label--bookmark {
    aspect-ratio: 0.72;
}

.wm-label--tag-pentagon {
    aspect-ratio: 1.24;
}

/* The corner ribbon is sized against the image diagonal and pinned into the corner. */
.wm-label--ribbon-corner {
    inline-size: calc(var(--wm-label-basis) * var(--wm-label-scale, 1) * 1.6);
    inset-inline: auto;
    margin: 0;
}

[dir="rtl"] .wm-label--ribbon-corner .wm-label__shape {
    scale: -1 1;
}

/*
 * Layer variants for surfaces that provide their own box instead of the anchor wrapper:
 * the product gallery slides and the gallery pager thumbnails. They live here rather than
 * in the Hyvä companion so the feature is never left unstyled when an integrator forgets
 * to rebuild the theme CSS; on Luma these rules simply go unused.
 */

/*
 * In the mini-cart the wrapper goes straight around a bare <img>, and its parent link is
 * wider than the image, so the wrapper has to shrink to the image or the badge floats off
 * beside it. Everywhere else the wrapper surrounds a container that already carries the
 * image's width.
 *
 * The wrapper therefore cannot be the query container here: `container-type: inline-size`
 * implies inline-axis containment, which forbids sizing from content and would collapse
 * it to zero. The layer takes that role instead - it is absolutely positioned to `inset:
 * 0`, so its width comes from the wrapper rather than from its own contents.
 */
.wm-label-anchor[data-wm-context="minicart"] {
    display: inline-block;
    container-type: normal;
}

.wm-label-anchor[data-wm-context="minicart"] > .wm-label-layer {
    container-type: inline-size;
}

/* A gallery slide is already position:relative, so the layer only needs its own container
   context for the image-relative sizing to resolve against the slide. */
.wm-label-layer--slide {
    container-type: inline-size;
}

/* A pager thumbnail is a CSS grid cell, not a positioned box. Absolute positioning would
   escape it and anchor somewhere far up the tree, so the layer joins the stack instead. */
.wm-label-layer--thumb {
    position: relative;
    inset: auto;
    container-type: inline-size;
}

/* Thumbnails are around 60px, where the standard badge size would swamp the image. */
.wm-label-layer--thumb .wm-label {
    --wm-label-basis: clamp(0.75rem, 60cqi, 2rem);
}

.wm-label-layer--thumb .wm-label__text {
    font-size: clamp(0.375rem, 14cqi, 0.625rem);
}

/*
 * When the badge is repeated on every slide, the floating one over the gallery viewport
 * would double up on whichever slide is active. Only its visible parts are removed: the
 * hidden readable text stays in place so assistive technology still announces the label
 * exactly once, rather than once per slide.
 */
.wm-label-layer--replaced .wm-label__shape,
.wm-label-layer--replaced .wm-label__text {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .wm-label,
    .wm-label * {
        animation: none !important;
        transition: none !important;
    }
}