/** Layered, theme-overridable ribbons. No assets, animations or storefront JavaScript. */
@layer prwc {
    .prwc-media { position: relative; display: block; isolation: isolate; }
    .prwc-media > img { display: block; inline-size: 100%; }
    .woocommerce-product-gallery__image > a:has(> .prwc-ribbons) { position: relative; display: block; }
    .prwc-ribbons {
        --prwc-bg: #0f766e;
        --prwc-fg: #fff;
        --prwc-accent: #115e59;
        --prwc-x: 12px;
        --prwc-y: 12px;
        --prwc-font: 13px;
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        display: block;
        overflow: hidden;
        border-radius: inherit;
        container-type: inline-size;
    }
    .prwc-stack { position: absolute; inset-inline: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
    .prwc-stack[data-position^="top"] { inset-block-start: 0; }
    .prwc-stack[data-position^="bottom"] { inset-block-end: 0; flex-direction: column-reverse; }
    .prwc-stack[data-position$="end"] { align-items: flex-end; }
    .prwc-stack[data-position$="center"] { align-items: center; }
    .prwc-item {
        position: relative;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        inline-size: max-content;
        max-inline-size: calc(100% - 2 * var(--prwc-x));
        margin-inline: var(--prwc-x);
        font: 700 var(--prwc-font)/1.25 system-ui, sans-serif;
    }
    .prwc-stack[data-position^="top"] > .prwc-item { margin-block-start: var(--prwc-y); }
    .prwc-stack[data-position^="bottom"] > .prwc-item { margin-block-end: var(--prwc-y); }
    .prwc-ribbon {
        position: relative;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-block: .65em;
        padding-inline: 1em;
        max-inline-size: 100%;
        margin: 0;
        border: 0;
        border-radius: .35em;
        background: var(--prwc-bg);
        color: var(--prwc-fg);
        font: inherit;
        text-align: center;
        text-decoration: none;
        text-wrap: balance;
        overflow-wrap: anywhere;
        box-shadow: 0 2px 8px #0002;
    }
    .prwc-ribbon[data-gradient="true"] { background: linear-gradient(120deg, var(--prwc-bg), var(--prwc-accent)); }
    .prwc-ribbon[data-shape="pill"] { border-radius: 100vmax; }
    .prwc-ribbon[data-shape="circle"] { border-radius: 50%; inline-size: 5em; aspect-ratio: 1; padding: .4em; }
    .prwc-ribbon[data-shape="flag"] { border-radius: 0; padding-inline-end: 1.7em; clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%); }
    .prwc-item[data-shape="diagonal"] { inline-size: 15em; min-block-size: 9em; }
    .prwc-ribbon[data-shape="diagonal"] {
        display: block;
        border-radius: 0;
        inline-size: 100%;
        padding-block: .5em;
        rotate: -35deg;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transform-origin: center;
    }
    .prwc-ribbon[data-shape="diagonal"][data-position$="end"] { rotate: 35deg; }
    .prwc-item[data-shape="bar"] { inline-size: 100%; max-inline-size: none; margin-inline: 0; }
    .prwc-ribbon[data-shape="bar"] { border-radius: 0; inline-size: 100%; }
    .prwc-item[data-shape="image"] { max-inline-size: min(100px, 35%); }
    .prwc-ribbon[data-shape="image"] { background: transparent; padding: 0; box-shadow: none; }
    .prwc-image { display: block; max-inline-size: 100%; block-size: auto; }
    @supports (background: color-mix(in oklab, red, blue)) {
        .prwc-ribbon[data-gradient="true"] { background: linear-gradient(120deg, var(--prwc-bg), color-mix(in oklab, var(--prwc-bg) 20%, var(--prwc-accent))); }
    }
    @container (inline-size < 220px) { .prwc-item { font-size: min(var(--prwc-font), 11px); } }
    @media (forced-colors: active) {
        .prwc-ribbon, .prwc-ribbon[data-gradient="true"] { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
    }
}
