@if (hasVariants) {
  <section class="variant-selector">
    @if (colours.length > 0) {
      <div class="variant-group">
        <span class="variant-label">{{ 'itemDetail.colour' | translate }}</span>
        <div class="variant-options">
          @for (colour of colours; track $index) {
            <button type="button" class="colour-swatch" [class.active]="selectedColour === colour" [style.background-color]="colour" [attr.aria-label]="colour" (click)="colourSelected.emit(colour)"></button>
          }
        </div>
      </div>
    } @else if (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 (sizes.length > 0) {
      <div class="variant-group">
        <span class="variant-label">{{ 'itemDetail.size' | translate }}</span>
        <div class="variant-options">
          @for (size of sizes; track $index) {
            <button type="button" class="size-chip" [class.active]="selectedSize === size" (click)="sizeSelected.emit(size)">{{ size }}</button>
          }
        </div>
      </div>
    } @else if (visibleFallbackSize) {
      <div class="variant-group">
        <span class="variant-label">{{ 'itemDetail.size' | translate }}</span>
        <span class="size-chip readonly">{{ visibleFallbackSize }}</span>
      </div>
    }
  </section>
}