/**
 * Detail modal — variant chips and the per-row "Versie" select (onderwerp 1c, 12-10-2026).
 *
 * Markup: templates/parts/modals/product-details/parts/variant-chips.php and merchants.php.
 * Every colour is a token from themes/flavor/assets/css/theme-vars.css; the swatches use the
 * product-colour tokens --staal-* (identical in both themes, ringed by --staal-rand so white
 * reads on white and black on black). Fluid sizes; one layout switch at 480px. Chips are at
 * least 44px high (touch), wrap on narrow screens and never scroll sideways.
 */

.variant-keuzes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.variant-keuzes__groep {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.variant-keuzes__kop {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.variant-keuzes__legend {
    color: var(--text-secondary);
    font-weight: 500;
}

.variant-keuzes__legend::after {
    content: ":";
}

.variant-keuzes__huidig {
    color: var(--text-primary);
    font-weight: 600;
}

.variant-keuzes__lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.variant-keuze {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.variant-keuze:hover:not(:disabled) {
    border-color: var(--accent);
    background-color: var(--bg-hover);
}

.variant-keuze:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Current chip: border AND weight carry it (not colour alone, WCAG 1.4.1); aria-pressed for AT. */
.variant-keuze--huidig {
    border: 2px solid var(--accent);
    padding: calc(0.375rem - 1px) calc(0.75rem - 1px) calc(0.375rem - 1px) calc(0.5rem - 1px);
    cursor: default;
}

.variant-keuze--huidig .variant-keuze__label {
    font-weight: 700;
}

.variant-keuze:disabled:not(.variant-keuze--huidig) {
    opacity: 0.55;
    cursor: progress;
}

.variant-keuze--uitverkocht .variant-keuze__prijs {
    color: var(--text-muted);
}

.variant-keuze--meer {
    padding-left: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.variant-keuze__tekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.variant-keuze__label {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variant-keuze__prijs {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Swatch: one colour, or two halves for "Zwart / wit". */
.variant-keuze__staal {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: var(--radius-full);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--staal-rand);
}

.variant-keuze__staal-deel {
    flex: 1 1 0;
    height: 100%;
}

.variant-keuze__staal-deel--wit { background-color: var(--staal-wit); }
.variant-keuze__staal-deel--zwart { background-color: var(--staal-zwart); }
.variant-keuze__staal-deel--grijs { background-color: var(--staal-grijs); }
.variant-keuze__staal-deel--zilver { background-color: var(--staal-zilver); }
.variant-keuze__staal-deel--goud { background-color: var(--staal-goud); }
.variant-keuze__staal-deel--rood { background-color: var(--staal-rood); }
.variant-keuze__staal-deel--roze { background-color: var(--staal-roze); }
.variant-keuze__staal-deel--oranje { background-color: var(--staal-oranje); }
.variant-keuze__staal-deel--geel { background-color: var(--staal-geel); }
.variant-keuze__staal-deel--groen { background-color: var(--staal-groen); }
.variant-keuze__staal-deel--blauw { background-color: var(--staal-blauw); }
.variant-keuze__staal-deel--paars { background-color: var(--staal-paars); }
.variant-keuze__staal-deel--bruin { background-color: var(--staal-bruin); }

/* Visually quiet live region: announces "Wit gekozen" without taking room. */
.variant-keuzes__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The modal body dims while a chip loads, so the swap reads as one step. */
.product-details-modal__body:has(.variant-keuzes[aria-busy="true"]) .product-details-modal__merchants,
.product-details-modal__body:has(.variant-keuzes[aria-busy="true"]) .product-details-modal__gallery,
.product-details-modal__body:has(.variant-keuzes[aria-busy="true"]) .product-details-modal__specs {
    opacity: 0.5;
    transition: opacity 150ms ease;
}

/* "Versie" select per shop row (merged packaging table). */
.merchant-row__versie {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 0;
}

.merchant-row__versie-label {
    font-weight: 600;
}

.merchant-row__versie-select {
    min-height: 2rem;
    max-width: 100%;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.75rem;
}

.merchant-row__versie-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* One packaging only: the list is there (it says which one) but cannot open. */
.merchant-row__versie-select:disabled {
    opacity: 1;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
    appearance: none;
    -webkit-appearance: none;
}

/* The row the visitor picked for the build. */
.merchant-row--gekozen {
    box-shadow: inset 3px 0 0 var(--accent);
}

.variant-build-keuze {
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.variant-build-keuze strong {
    color: var(--text-primary);
}

/* Narrow phones (360px): two chips per row, label and price stacked, select below the name. */
@media (max-width: 480px) {
    .variant-keuzes__lijst {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .variant-keuze {
        width: 100%;
    }

    .merchant-row__versie {
        display: flex;
        width: 100%;
    }

    .merchant-row__versie-select {
        flex: 1 1 auto;
        min-height: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .variant-keuze,
    .product-details-modal__body:has(.variant-keuzes[aria-busy="true"]) .product-details-modal__merchants,
    .product-details-modal__body:has(.variant-keuzes[aria-busy="true"]) .product-details-modal__gallery,
    .product-details-modal__body:has(.variant-keuzes[aria-busy="true"]) .product-details-modal__specs {
        transition: none;
    }
}