/* ============================================================================
 * Dynamic catalog facets — storefront panel (Phase D-UI)
 *
 * Every colour resolves to a Theme-Options-backed variable (--brand/--ink/--border/…)
 * per the project golden rule; there is no hard-coded hex in this file.
 * ========================================================================== */

.wn-facets {
    margin-bottom: var(--space-6);
}

/* ---- chips (current selection) ---------------------------------------- */

.wn-facets__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.wn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: 4px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-meta);
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.wn-chip:hover {
    border-color: var(--brand);
    background: var(--brand-tint);
}

.wn-chip__group {
    color: var(--ink-3);
}

.wn-chip__group::after {
    content: ':';
}

.wn-chip__value {
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-chip__x {
    font-size: 15px;
    line-height: 1;
    color: var(--ink-3);
}

.wn-chip--clear {
    border-style: dashed;
    color: var(--ink-2);
}

/* Explains why the filters in a shared link were not applied here. */
.wn-facets__notice {
    flex: 1 0 100%;
    font-size: var(--fs-meta);
    line-height: 1.4;
    color: var(--ink-3);
}

/* ---- groups ------------------------------------------------------------ */

.wn-facets__groups {
    transition: opacity .15s ease;
}

.wn-facets--loading .wn-facets__groups {
    opacity: .55;
    pointer-events: none;
}

.wn-facet {
    display: block;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.wn-facet:last-child {
    border-bottom: 0;
}

.wn-facet__title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--ink);
}

.wn-facet__unit {
    font-weight: var(--fw-regular);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-3);
}

.wn-facet__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wn-facet__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 6px;
    margin: 0;
    border-radius: var(--r-control);
    font-size: var(--fs-body);
    color: var(--ink-2);
    cursor: pointer;
}

.wn-facet__option:hover {
    background: var(--brand-tint);
}

.wn-facet__option.is-selected {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

.wn-facet__input {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}

.wn-facet__option-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-facet__count {
    flex: none;
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

.wn-facet__more {
    margin-top: var(--space-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: var(--fs-meta);
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.wn-facet__more:hover {
    text-decoration: underline;
}

/* ---- colour swatches --------------------------------------------------- */

.wn-facet__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wn-swatch {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 46px;
    margin: 0;
    cursor: pointer;
}

/* Visually hidden but still focusable — the swatch must stay reachable by keyboard, so this
   deliberately avoids display:none / visibility:hidden / pointer-events:none. */
.wn-swatch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.wn-swatch__chip {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    /* --wn-swatch is set inline from the option's admin-defined colour. */
    background: var(--wn-swatch, var(--surface));
    box-shadow: 0 0 0 0 var(--brand);
    transition: box-shadow .15s ease;
}

.wn-swatch.is-selected .wn-swatch__chip,
.wn-swatch__input:focus-visible + .wn-swatch__chip {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
}

.wn-swatch__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--ink-3);
}

.wn-swatch.is-selected .wn-swatch__label {
    color: var(--ink);
}

.wn-swatch__count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

/* ---- numeric range ----------------------------------------------------- */

.wn-range__slider {
    position: relative;
    height: 26px;
    margin-bottom: var(--space-2);
}

.wn-range__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    margin-top: -1.5px;
    border-radius: var(--r-pill);
    background: var(--border);
}

.wn-range__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    padding: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    /* Both thumbs sit on one track; the bar itself must not swallow clicks. */
    pointer-events: none;
}

.wn-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--surface);
    border-radius: var(--r-pill);
    background: var(--brand);
    cursor: pointer;
    pointer-events: auto;
}

.wn-range__input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--surface);
    border-radius: var(--r-pill);
    background: var(--brand);
    cursor: pointer;
    pointer-events: auto;
}

.wn-range__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.wn-range__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.wn-range__field-label {
    font-size: 11px;
    color: var(--ink-3);
}

.wn-range__number {
    width: 100%;
    padding: 6px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-body);
}

.wn-range__number:focus {
    outline: none;
    border-color: var(--brand);
}

/* ---- skeleton / error / empty ------------------------------------------ */

.wn-facet--skeleton .wn-facet__skeleton-title,
.wn-facet--skeleton .wn-facet__skeleton-row {
    display: block;
    height: 10px;
    margin-bottom: var(--space-3);
    border-radius: var(--r-badge);
    background: var(--border);
    animation: wn-facet-pulse 1.2s ease-in-out infinite;
}

.wn-facet--skeleton .wn-facet__skeleton-title {
    width: 45%;
}

.wn-facet--skeleton .wn-facet__skeleton-row {
    height: 8px;
    width: 80%;
}

@keyframes wn-facet-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
    .wn-facet--skeleton .wn-facet__skeleton-title,
    .wn-facet--skeleton .wn-facet__skeleton-row {
        animation: none;
    }
}

.wn-facets__error {
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    text-align: center;
}

.wn-facets__error-text {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-meta);
    color: var(--ink-2);
}

.wn-facets__retry,
.wn-facets__empty-clear {
    padding: 6px var(--space-4);
    border: 1px solid var(--brand);
    border-radius: var(--r-control);
    background: none;
    color: var(--brand);
    font-size: var(--fs-meta);
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.wn-facets__retry:hover,
.wn-facets__empty-clear:hover {
    background: var(--brand);
    color: var(--surface);
}

.wn-facets__empty {
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.wn-facets__empty-title {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.wn-facets__empty-hint {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body);
    color: var(--ink-3);
}

/* ---- results loading veil ---------------------------------------------- */

.wn-results--loading {
    position: relative;
}

.wn-results--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--surface);
    opacity: .55;
    pointer-events: none;
}

.wn-facets__pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
}