@if (hasVariants) {
  <section class="variant-selector">
    @for (group of normalizedGroups; track group.key) {
      <div class="variant-group">
        <span class="variant-label">{{ group.label | translate }}</span>
        <div class="variant-options">
          @for (option of group.options; track option.value) {
            @if (group.key === 'colour') {
              <button type="button" class="colour-swatch" [class.active]="isActive(group.key, option.value)" [attr.aria-pressed]="isActive(group.key, option.value)" [style.background-color]="option.value" [attr.aria-label]="option.label || option.value" (click)="onSelect(group.key, option.value)">
                @if (isActive(group.key, option.value)) {
                  <app-icon name="check" [size]="14" />
                }
              </button>
            } @else {
              <button type="button" class="size-chip" [class.active]="isActive(group.key, option.value)" [attr.aria-pressed]="isActive(group.key, option.value)" (click)="onSelect(group.key, option.value)">{{ option.label || option.value }}</button>
            }
          }
        </div>
      </div>
    }

    @if (normalizedGroups.length === 0 && fallbackColour) {
      <div class="variant-group">
        <span class="variant-label">{{ 'itemDetail.colour' | translate }}</span>
        <span class="colour-swatch readonly" [style.background-color]="fallbackColour"></span>
      </div>
    }

    @if (normalizedGroups.length === 0 && visibleFallbackSize) {
      <div class="variant-group">
        <span class="variant-label">{{ 'itemDetail.size' | translate }}</span>
        <span class="size-chip readonly">{{ visibleFallbackSize }}</span>
      </div>
    }
  </section>
}