.smcb-color-badge {
    position: absolute !important;
    z-index: 8;
    display: block !important;
    width: var(--smcb-desktop-size, 44px) !important;
    height: var(--smcb-desktop-size, 44px) !important;
    border: var(--smcb-border-width, 2px) solid var(--smcb-border-color, #fff) !important;
    border-radius: 50% !important;
    overflow: hidden;
    background-color: var(--smcb-product-color) !important;
    box-shadow: var(--smcb-shadow, 0 3px 10px rgba(0,0,0,.28)) !important;
    pointer-events: none;
}

/* Ensfarvet maling. */
.smcb-color-badge--effect-solid {
    background-color: var(--smcb-product-color) !important;
    background-image: linear-gradient(145deg, rgba(255,255,255,.18), transparent 42%, rgba(0,0,0,.08)) !important;
}

/* Meget fine, uregelmæssigt fordelte pigmenter uden et tydeligt gentaget mønster. */
.smcb-color-badge--effect-metallic {
    background-color: var(--smcb-product-color) !important;
    background-image:
        radial-gradient(circle at 7% 13%, rgba(255,255,255,.72) 0 .28px, transparent .62px),
        radial-gradient(circle at 19% 61%, rgba(255,255,255,.43) 0 .22px, transparent .55px),
        radial-gradient(circle at 31% 27%, rgba(255,255,255,.68) 0 .32px, transparent .68px),
        radial-gradient(circle at 42% 82%, rgba(255,255,255,.38) 0 .20px, transparent .52px),
        radial-gradient(circle at 56% 44%, rgba(255,255,255,.76) 0 .27px, transparent .64px),
        radial-gradient(circle at 67% 17%, rgba(255,255,255,.46) 0 .21px, transparent .55px),
        radial-gradient(circle at 73% 73%, rgba(255,255,255,.70) 0 .30px, transparent .66px),
        radial-gradient(circle at 88% 36%, rgba(255,255,255,.40) 0 .19px, transparent .50px),
        radial-gradient(circle at 94% 89%, rgba(255,255,255,.65) 0 .25px, transparent .60px),
        linear-gradient(142deg, rgba(255,255,255,.18), transparent 38%, rgba(0,0,0,.12) 78%, rgba(255,255,255,.10)) !important;
    background-size:
        17px 19px, 23px 29px, 31px 21px, 27px 35px, 37px 25px,
        29px 41px, 43px 31px, 47px 37px, 53px 43px, 100% 100% !important;
    background-position:
        1px 3px, 7px 11px, 13px 2px, 4px 17px, 19px 9px,
        9px 23px, 27px 5px, 2px 29px, 31px 19px, 0 0 !important;
}

/* Valgfrit glanslag, som kan kombineres med enhver grundfarve og effekt. */
.smcb-color-badge--shine::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 29% 18%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.56) 10%, rgba(255,255,255,.14) 24%, transparent 42%),
        linear-gradient(128deg, transparent 31%, rgba(255,255,255,.46) 43%, rgba(255,255,255,.12) 51%, transparent 62%),
        radial-gradient(ellipse at 72% 82%, rgba(255,255,255,.18), transparent 38%);
    mix-blend-mode: screen;
    opacity: .92;
    pointer-events: none;
}

/* Krom er bevidst neutral sølv og bruger derfor ikke den valgte grundfarve. */
.smcb-color-badge--effect-chrome {
    background-color: #bfc3c4 !important;
    background-image:
        linear-gradient(135deg,
            #fafafa 0%,
            #777b7d 12%,
            #ffffff 25%,
            #34383a 39%,
            #d8dcdd 52%,
            #ffffff 65%,
            #686c6e 79%,
            #f7f7f7 92%,
            #9da1a3 100%) !important;
}

/* Blank klarlak: næsten gennemsigtig med en tydelig refleks. */
.smcb-color-badge--effect-clear-gloss {
    background-color: rgba(255,255,255,.08) !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.12) 24%, transparent 43%, rgba(255,255,255,.12) 100%) !important;
    -webkit-backdrop-filter: brightness(1.12) saturate(1.12);
    backdrop-filter: brightness(1.12) saturate(1.12);
}

.smcb-color-badge--effect-clear-gloss::after {
    content: "";
    position: absolute;
    top: 14%;
    left: 18%;
    width: 42%;
    height: 18%;
    border-radius: 50%;
    background: rgba(255,255,255,.78);
    filter: blur(.4px);
    transform: rotate(-28deg);
}

/* Mat klarlak: billedet kan stadig ses, men gennem en frostet og afdæmpet flade. */
.smcb-color-badge--effect-clear-matte {
    background-color: rgba(225,231,228,.34) !important;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.28) 0 .6px, transparent 1px),
        linear-gradient(145deg, rgba(255,255,255,.28), rgba(180,190,185,.16)) !important;
    background-size: 5px 5px, 100% 100% !important;
    -webkit-backdrop-filter: blur(3px) saturate(.58) brightness(1.04);
    backdrop-filter: blur(3px) saturate(.58) brightness(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-product-gallery__image,
.smfv-card__image {
    position: relative !important;
}

.smcb-color-badge--top-right { top: var(--smcb-desktop-offset, 12px); right: var(--smcb-desktop-offset, 12px); }
.smcb-color-badge--top-left { top: var(--smcb-desktop-offset, 12px); left: var(--smcb-desktop-offset, 12px); }
.smcb-color-badge--bottom-right { right: var(--smcb-desktop-offset, 12px); bottom: var(--smcb-desktop-offset, 12px); }
.smcb-color-badge--bottom-left { bottom: var(--smcb-desktop-offset, 12px); left: var(--smcb-desktop-offset, 12px); }

/* Gruppeoverskrifter i farvesorterede WooCommerce-kategorier. */
.woocommerce ul.products li.smcb-color-group-heading {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 26px 0 4px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid #174f3a;
    list-style: none !important;
    color: #18241f;
    scroll-margin-top: var(--smcb-anchor-scroll-offset, 110px);
}

.woocommerce ul.products li.smcb-color-group-heading:first-child {
    margin-top: 4px !important;
}

.smcb-color-group-heading__dot {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border: 1px solid rgba(20,40,31,.22);
    border-radius: 50%;
    background-color: var(--smcb-heading-color, #d7ddd9);
    box-shadow: inset 0 1px 3px rgba(255,255,255,.65), 0 1px 3px rgba(0,0,0,.12);
}

.smcb-color-group-heading__text {
    font-family: inherit;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
}

/* Fast farvenavigation. Farvestriben er 3-20 px, mens klikområdet er større. */
.smcb-anchor-nav {
    position: fixed;
    z-index: 999;
    top: var(--smcb-anchor-current-top, var(--smcb-content-start, 0px));
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 3px;
    transform: none;
    border: 1px solid rgba(23,79,58,.16);
    border-radius: 8px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.smcb-anchor-nav__toggle {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 30px !important;
    min-width: 30px !important;
    height: 39px !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #174f3a !important;
    cursor: pointer;
}

.smcb-anchor-nav__toggle:hover,
.smcb-anchor-nav__toggle:focus-visible {
    background: rgba(23,79,58,.08) !important;
}

.smcb-anchor-nav__wheel {
    display: block;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(20,40,31,.28);
    border-radius: 50%;
    background: conic-gradient(#ef4444, #f59e0b, #f4dc42, #40a95b, #3182ce, #6847b7, #d74b91, #ef4444);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 1px 2px rgba(0,0,0,.14);
}

.smcb-anchor-nav__arrow {
    display: block;
    height: 11px;
    font-size: 15px;
    font-weight: 700;
    line-height: 10px;
}

.smcb-anchor-nav__colors {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-height: calc(100vh - var(--smcb-anchor-current-top, var(--smcb-content-start, 0px)) - 55px);
    overflow-y: auto;
    overflow-x: hidden;
}

.smcb-anchor-nav--collapsed .smcb-anchor-nav__colors {
    display: none;
}

.smcb-anchor-nav--collapsed {
    padding: 2px !important;
}

.smcb-anchor-nav--left { left: var(--smcb-anchor-edge, 6px); }
.smcb-anchor-nav--right { right: var(--smcb-anchor-edge, 6px); }

.smcb-anchor-nav__button {
    box-sizing: content-box !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(var(--smcb-anchor-width, 8px) + 14px) !important;
    min-width: 0 !important;
    height: 25px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

.smcb-anchor-nav__color {
    display: block;
    width: var(--smcb-anchor-width, 8px);
    height: 21px;
    border: 1px solid rgba(20,40,31,.22);
    border-radius: 5px;
    background: var(--smcb-anchor-color, #d7ddd9);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.6);
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Fælles ikon til grupper, der indeholder et sæt af flere farver. */
.smcb-multicolor-set-icon {
    background-color: transparent !important;
    background-image: linear-gradient(135deg,
        #ffffff 0%, #e6e6e6 16.66%,
        #161616 16.66%, #474747 33.33%,
        #a92121 33.33%, #e45a50 50%,
        #dda900 50%, #ffe36b 66.66%,
        #23683a 66.66%, #58aa6b 83.33%,
        #214e8f 83.33%, #6094d4 100%) !important;
}

.smcb-anchor-nav__button:hover .smcb-anchor-nav__color,
.smcb-anchor-nav__button:focus-visible .smcb-anchor-nav__color {
    transform: scaleX(1.35);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 0 0 2px rgba(23,79,58,.22);
}

@media (min-width: 701px) {
    .smcb-anchor-nav--hide-desktop { display: none !important; }
}

@media (max-width: 700px) {
    .smcb-color-badge {
        width: var(--smcb-mobile-size, 34px) !important;
        height: var(--smcb-mobile-size, 34px) !important;
    }
    .smcb-color-badge--top-right { top: var(--smcb-mobile-offset, 8px); right: var(--smcb-mobile-offset, 8px); }
    .smcb-color-badge--top-left { top: var(--smcb-mobile-offset, 8px); left: var(--smcb-mobile-offset, 8px); }
    .smcb-color-badge--bottom-right { right: var(--smcb-mobile-offset, 8px); bottom: var(--smcb-mobile-offset, 8px); }
    .smcb-color-badge--bottom-left { bottom: var(--smcb-mobile-offset, 8px); left: var(--smcb-mobile-offset, 8px); }
    .woocommerce ul.products li.smcb-color-group-heading {
        margin-top: 20px !important;
        padding-bottom: 8px !important;
    }
    .smcb-color-group-heading__dot { width: 18px; height: 18px; margin-right: 8px; }
    .smcb-color-group-heading__text { font-size: 21px; }
    .smcb-anchor-nav--hide-mobile { display: none !important; }
    .smcb-anchor-nav { gap: 1px; padding: 3px 2px; border-radius: 6px; }
    .smcb-anchor-nav__toggle { width: 28px !important; min-width: 28px !important; height: 37px !important; min-height: 37px !important; }
    .smcb-anchor-nav__wheel { width: 18px; height: 18px; }
    .smcb-anchor-nav__button { height: 23px !important; }
    .smcb-anchor-nav__color { height: 19px; }
}