/* IT-SENTRALEN Swatches — nøytral standard. Overstyr via CSS-variabler eller egne selektorer. */
.its-swatches {
  --its-swatch-size: 32px;
  --its-swatch-gap: 8px;
  --its-swatch-radius: 2px;
  --its-swatch-border: rgba(0, 0, 0, 0.18);
  --its-swatch-border-hover: rgba(0, 0, 0, 0.55);
  --its-swatch-selected: currentColor;
  --its-swatch-ring: #fff;
  --its-swatch-label-bg: transparent;
  --its-swatch-label-selected-bg: currentColor;
  --its-swatch-label-selected-color: #fff;
  position: relative;
}
.its-swatches--circle { --its-swatch-radius: 50%; }
.its-swatches.is-many { --its-swatch-size: 24px; --its-swatch-gap: 6px; }

/* Selecten beholdes for WooCommerce-skriptet, men skjules visuelt. */
.its-swatches__select {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.its-swatches__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--its-swatch-gap);
}
.its-swatches__item { margin: 0; padding: 0; }

.its-swatch {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; font: inherit; color: inherit; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--its-swatch-radius);
}
.its-swatch:focus-visible { outline: 2px solid var(--its-swatch-selected); outline-offset: 2px; }

/* Farge/bilde */
.its-swatch--color, .its-swatch--image { width: var(--its-swatch-size); height: var(--its-swatch-size); position: relative; }
.its-swatch--color .its-swatch__label, .its-swatch--image .its-swatch__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.its-swatch__visual {
  display: block; width: 100%; height: 100%;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--its-swatch-border);
  background-size: cover; background-position: center;
  transition: box-shadow 120ms ease;
}
.its-swatch:hover .its-swatch__visual { box-shadow: inset 0 0 0 1px var(--its-swatch-border-hover); }
.its-swatch.is-selected .its-swatch__visual {
  box-shadow: 0 0 0 2px var(--its-swatch-ring), 0 0 0 4px var(--its-swatch-selected), inset 0 0 0 1px var(--its-swatch-border);
}

/* Etikett-chips (størrelse o.l., eller termer uten farge) */
.its-swatch--label {
  min-height: var(--its-swatch-size); padding: 0 12px;
  border: 1px solid var(--its-swatch-border); background: var(--its-swatch-label-bg);
  font-size: 0.875em; font-weight: 600; white-space: nowrap;
}
.its-swatch--label:hover { border-color: var(--its-swatch-border-hover); }
.its-swatch--label.is-selected {
  background: var(--its-swatch-label-selected-bg); color: var(--its-swatch-label-selected-color);
  border-color: var(--its-swatch-label-selected-bg);
}

/* Utilgjengelig kombinasjon (WooCommerce har deaktivert <option>) */
.its-swatch.is-disabled { opacity: 0.35; cursor: not-allowed; }
.its-swatch.is-disabled .its-swatch__visual::after,
.its-swatch--label.is-disabled::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent calc(50% - 1px), var(--its-swatch-border-hover) 50%, transparent calc(50% + 1px));
  border-radius: inherit; pointer-events: none;
}
.its-swatch.is-disabled .its-swatch__visual { position: relative; }
.its-swatch--label.is-disabled { position: relative; }

/* Valgt verdi ved etiketten */
.its-swatches__selected { font-weight: 400; opacity: 0.75; }
.its-swatches__selected:not(:empty)::before { content: ": "; }

/* Breakdance-wrapper rundt selecten (pil + ramme) skal ikke synes når swatches er aktive. */
.bde-woo-select.its-has-swatches { border: 0; padding: 0; background: none; }
.bde-woo-select.its-has-swatches > .bde-woo-select__arrow { display: none; }
.bde-woo-select:has(> .its-swatches) { border: 0; padding: 0; background: none; }
.bde-woo-select:has(> .its-swatches) > .bde-woo-select__arrow { display: none; }

/* Fargeprikker i produktkort */
.its-dots {
  --its-dot-size: 12px;
  --its-dot-gap: 4px;
  --its-dot-radius: 2px;
  --its-dot-border: rgba(0, 0, 0, 0.18);
  display: inline-flex; align-items: center; gap: var(--its-dot-gap); line-height: 1; vertical-align: middle;
}
.its-dots--circle { --its-dot-radius: 50%; }
.its-dot {
  display: inline-block; width: var(--its-dot-size); height: var(--its-dot-size);
  border-radius: var(--its-dot-radius);
  box-shadow: inset 0 0 0 1px var(--its-dot-border);
  background-size: cover; background-position: center;
}
.its-dots__more { font-size: 0.75em; font-weight: 600; opacity: 0.7; margin-left: 2px; }