/* sp-swatches. Knappene vises bare når JS har koblet dem (.sp-swatches-klar). Ellers brukes Woo sin select. */
.sp-swatches { display: none; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.sp-swatches-klar .sp-swatches { display: flex; }
.sp-swatches-klar select.sp-swatches-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.sp-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 2px solid #d4d4d4; border-radius: 22px; background: #fff; color: #242424; font: inherit; font-weight: 600; cursor: pointer; }
.sp-swatch--farge, .sp-swatch--bilde { width: 44px; padding: 3px; border-radius: 50%; }
.sp-swatch__farge, .sp-swatch img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sp-swatch:hover { border-color: #767676; }
.sp-swatch[aria-pressed="true"] { border-color: var(--sp-primar, rgb(14, 98, 59)); box-shadow: 0 0 0 1px var(--sp-primar, rgb(14, 98, 59)); }
.sp-swatch:focus-visible { outline: 2px solid var(--sp-primar, rgb(14, 98, 59)); outline-offset: 2px; }
/* Utsolgt: tydelig, ikke bare farge. Svakere og med skråstrek. */
.sp-swatch.sp-utsolgt { opacity: .45; border-style: dashed; }
.sp-swatch[aria-disabled="true"] { cursor: not-allowed; }
.sp-swatch.sp-utsolgt::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; background: #b00020; transform: translateX(-50%) rotate(45deg); pointer-events: none; }
.sp-swatch--tekst.sp-utsolgt { text-decoration: line-through; }