/** Shopify CDN: Minification failed

Line 110:4 Unexpected "{"
Line 110:5 Expected identifier but found "%"
Line 110:20 Unexpected "="
Line 113:62 Unterminated string token
Line 114:66 Expected identifier but found "%"

**/
    .product-card .card-image-wrap .card-color-swatches {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 2;
        margin: 0;
        padding: 0;
    }

    .product-card .card-image-wrap .card-color-swatch {
        width: 22px;
        height: 22px;
        min-width: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        position: relative;
        border-radius: 50%;
    }

    .product-card .card-image-wrap .card-color-swatch__dot {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--swatch-color, #ccc);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
        transition: transform .15s ease;
    }

    /* Selected ring lives on the inner dot, with a 2px gap to the dot itself.
       Putting it here (instead of on the outer button) means the ring stays
       inside the button's bounding box and never gets clipped by the card edge. */
    .product-card .card-image-wrap .card-color-swatch.is-selected .card-color-swatch__dot {
        box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000;
    }

    .product-card .card-image-wrap .card-color-swatch:hover .card-color-swatch__dot {
        transform: scale(1.1);
    }

    .product-card .card-image-wrap .card-color-swatch--unavailable {
        opacity: 0.4;
    }

    .product-card .card-image-wrap .card-color-swatch--unavailable::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 2px;
        right: 2px;
        height: 1px;
        background: rgba(0,0,0,0.5);
        transform: rotate(-45deg);
        transform-origin: center;
    }

    .product-card .card-image-wrap .card-color-swatch--hidden {
        display: none;
    }

    .product-card .card-image-wrap .card-color-swatch-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        background: #fff;
        color: #000;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.02em;
        pointer-events: none;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    }

    .product-card .card-image-wrap .card-color-swatch .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    {%- comment -%} =========================================================
    Named color mapping — extend this list as needed.
    Covers common EN + SE color names so the dot shows the right hue
    even when the option value isn't a valid CSS color string.
    ============================================================ {%- endcomment -%}
    .product-card .card-color-swatch.color-black .card-color-swatch__dot,
    .product-card .card-color-swatch.color-svart .card-color-swatch__dot { background: #000; }

    .product-card .card-color-swatch.color-white .card-color-swatch__dot,
    .product-card .card-color-swatch.color-vit .card-color-swatch__dot { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); }

    .product-card .card-color-swatch.color-grey .card-color-swatch__dot,
    .product-card .card-color-swatch.color-gray .card-color-swatch__dot,
    .product-card .card-color-swatch.color-gra .card-color-swatch__dot,
    .product-card .card-color-swatch.color-graa .card-color-swatch__dot { background: #8a8a8a; }

    .product-card .card-color-swatch.color-beige .card-color-swatch__dot { background: #d6c5a8; }
    .product-card .card-color-swatch.color-cream .card-color-swatch__dot,
    .product-card .card-color-swatch.color-creme .card-color-swatch__dot { background: #efe5d2; }

    .product-card .card-color-swatch.color-brown .card-color-swatch__dot,
    .product-card .card-color-swatch.color-brun .card-color-swatch__dot { background: #6b4a2b; }

    .product-card .card-color-swatch.color-tan .card-color-swatch__dot { background: #c8a574; }
    .product-card .card-color-swatch.color-camel .card-color-swatch__dot { background: #b58a55; }

    .product-card .card-color-swatch.color-red .card-color-swatch__dot,
    .product-card .card-color-swatch.color-rod .card-color-swatch__dot,
    .product-card .card-color-swatch.color-roed .card-color-swatch__dot { background: #c0352b; }

    .product-card .card-color-swatch.color-pink .card-color-swatch__dot,
    .product-card .card-color-swatch.color-rosa .card-color-swatch__dot { background: #f0a8b8; }

    .product-card .card-color-swatch.color-blue .card-color-swatch__dot,
    .product-card .card-color-swatch.color-bla .card-color-swatch__dot,
    .product-card .card-color-swatch.color-blaa .card-color-swatch__dot { background: #2e5aa8; }

    .product-card .card-color-swatch.color-navy .card-color-swatch__dot,
    .product-card .card-color-swatch.color-marin .card-color-swatch__dot { background: #1a2b4a; }

    .product-card .card-color-swatch.color-green .card-color-swatch__dot,
    .product-card .card-color-swatch.color-gron .card-color-swatch__dot,
    .product-card .card-color-swatch.color-groen .card-color-swatch__dot { background: #4a7a3a; }

    .product-card .card-color-swatch.color-olive .card-color-swatch__dot { background: #6b6a3a; }

    .product-card .card-color-swatch.color-yellow .card-color-swatch__dot,
    .product-card .card-color-swatch.color-gul .card-color-swatch__dot { background: #e8c63a; }

    .product-card .card-color-swatch.color-orange .card-color-swatch__dot { background: #e07a2a; }

    .product-card .card-color-swatch.color-purple .card-color-swatch__dot,
    .product-card .card-color-swatch.color-lila .card-color-swatch__dot { background: #6a3a8a; }

    @media (max-width: 749px) {
        .product-card .card-image-wrap .card-color-swatches {
            top: 8px;
            right: 10px;
            gap: 6px;
        }
        .product-card .card-image-wrap .card-color-swatch,
        .product-card .card-image-wrap .card-color-swatch-more {
            width: 20px;
            height: 20px;
            min-width: 20px;
        }
        .product-card .card-image-wrap .card-color-swatch__dot {
            width: 14px;
            height: 14px;
        }
    }

    .product-varient-field.is-unavailable {
        opacity: 0.4;
    }