/*
|--------------------------------------------------------------------------
| Product Archive
|--------------------------------------------------------------------------
*/

.product-archive {
    padding-block:
        var(--space-2xl)
        var(--space-3xl);
}

.product-archive--trope {
    padding: 2.5rem 0 4rem;
}

.product-archive__container {
    display: grid;
}

.product-archive--trope .product-archive__container {
    gap: 2rem;
}

/*
|--------------------------------------------------------------------------
| Catalog Results
|--------------------------------------------------------------------------
*/

.product-catalog-results {
    position:
        relative;

    min-width:
        0;

    scroll-margin-top:
        var(--space-xl);

    outline:
        none;
}

.product-catalog-results:focus-visible {
    outline:
        3px solid
        var(--color-accent);

    outline-offset:
        0.5rem;

    border-radius:
        var(--radius-md);
}

/*
|--------------------------------------------------------------------------
| Catalog Loading State
|--------------------------------------------------------------------------
*/

.product-catalog-results[aria-busy="true"] {
    cursor:
        progress;
}

.product-catalog-results[aria-busy="true"]
.product-grid,
.product-catalog-results[aria-busy="true"]
.product-archive__footer,
.product-catalog-results[aria-busy="true"]
.product-archive__empty {
    opacity:
        0.45;

    transition:
        opacity 160ms ease;
}

.product-catalog-results[aria-busy="true"]
.product-grid,
.product-catalog-results[aria-busy="true"]
.navigation.pagination,
.product-catalog-results[aria-busy="true"]
.product-archive__empty-reset {
    pointer-events:
        none;
}

.product-catalog-results[aria-busy="true"]::after {
    position:
        absolute;

    top:
        min(
            10rem,
            20vh
        );

    left:
        50%;

    z-index:
        2;

    width:
        2.75rem;

    height:
        2.75rem;

    content:
        "";

    border:
        0.25rem solid
        color-mix(
            in srgb,
            var(--color-accent) 22%,
            transparent
        );

    border-top-color:
        var(--color-accent);

    border-radius:
        50%;

    transform:
        translateX(-50%);

    animation:
        product-catalog-loading-spin
        700ms
        linear
        infinite;

    pointer-events:
        none;
}

@keyframes product-catalog-loading-spin {
    to {
        transform:
            translateX(-50%)
            rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.product-archive__header {
    margin-bottom:
        var(--space-2xl);
}

.product-archive__header--hero {
    margin-bottom:
    2rem;
}

.product-archive__header--context {
    margin-bottom:
        2rem;
}

.product-archive__hero {
    padding:
        1.25rem;

    background:
        rgba(255, 255, 255, 0.84);

    border:
        1px solid rgba(118, 86, 56, 0.12);

    border-radius:
        28px;

    box-shadow:
        0 20px 50px rgba(77, 50, 30, 0.08);

    backdrop-filter:
        blur(12px);
}

.product-archive__intro {
    display:
        grid;

    gap:
        0.55rem;
}

.product-archive__eyebrow {
    margin:
        0;

    color:
        #8b6b53;

    font-size:
        0.84rem;

    font-weight:
        600;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.product-archive__title {
    margin:
        0;

    color:
        var(--color-text);

    line-height:
        1.15;
}

.product-archive__lead {
    max-width:
        68ch;

    margin:
        0;

    color:
        #4e4036;

    font-size:
        1.02rem;

    line-height:
        1.72;
}

.product-archive__intro--context {
    max-width:
        68ch;
}

.product-archive__header--context + .product-filters {
    margin-top:
        0.5rem;
}

/*
|--------------------------------------------------------------------------
| Archive Footer
|--------------------------------------------------------------------------
*/

.product-archive__footer {
    display:
        flex;

    min-width:
        0;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-xl);

    margin-top:
        var(--space-3xl);

    padding-top:
        var(--space-2xl);

    border-top:
        1px solid
        var(--color-border);
}

.product-archive__count {
    flex:
        0 1 auto;

    margin:
        0;

    color:
        var(--color-muted);

    font-size:
        0.95rem;

    line-height:
        1.5;
}

/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.product-archive__empty {
    width:
        min(
            100%,
            44rem
        );

    margin:
        var(--space-2xl)
        auto
        0;

    padding:
        var(--space-2xl);

    color:
        var(--color-text);

    text-align:
        center;

    background:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);
}

.product-catalog-results__view-controls {
    display:
        flex;

    justify-content:
        flex-end;

    margin-bottom:
        var(--space-lg);
}

.product-catalog-results__view-toggle {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        2.75rem;

    height:
        2.75rem;

    border:
        1px solid
        var(--color-border);

    border-radius:
        999px;

    background:
        var(--color-surface);

    color:
        var(--color-text);

    cursor:
        pointer;

    transition:
        transform 120ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.product-catalog-results__view-toggle:hover {
    transform:
        translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            var(--color-accent) 45%,
            var(--color-border)
        );

    box-shadow:
        var(--shadow-soft);
}

.product-catalog-results__view-toggle:focus-visible {
    outline:
        2px solid
        var(--color-accent);

    outline-offset:
        3px;
}

.product-catalog-results[data-view-mode="track"] .product-grid {
    display:
        flex;

    gap:
        var(--space-lg);

    overflow-x:
        auto;

    padding-bottom:
        0.35rem;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-inline:
        contain;
}

.product-catalog-results[data-view-mode="track"] .product-card {
    flex:
        0 0 clamp(220px, 62vw, 280px);

    max-width:
        280px;

    height:
        auto;

    scroll-snap-align:
        start;
}

@media (pointer: coarse) {
    .product-catalog-results[data-view-mode="track"] .product-card {
        flex-basis:
            clamp(210px, 76vw, 300px);

        max-width:
            300px;
    }
}

.product-archive__empty-title {
    margin:
        0
        0
        var(--space-sm);

    color:
        var(--color-text);

    line-height:
        1.25;
}

.product-archive__empty-text {
    max-width:
        52ch;

    margin:
        0
        auto;

    color:
        var(--color-muted);

    line-height:
        1.6;
}

.product-archive__empty-reset {
    display:
        inline-flex;

    min-height:
        3rem;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        var(--space-lg);

    padding-inline:
        1.125rem;

    color:
        #fff;

    background:
        var(--color-accent);

    border:
        1px solid
        var(--color-accent);

    border-radius:
        var(--radius-md);

    font-weight:
        700;

    line-height:
        1.2;

    text-align:
        center;

    text-decoration:
        none;
}

.product-archive__empty-reset:hover {
    filter:
        brightness(
            0.92
        );
}

.product-archive__empty-reset:focus-visible {
    outline:
        3px solid
        var(--color-accent);

    outline-offset:
        3px;
}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
    reduce
) {
    .product-archive
    .nav-links a,
    .product-catalog-results[aria-busy="true"]
    .product-grid,
    .product-catalog-results[aria-busy="true"]
    .product-archive__footer,
    .product-catalog-results[aria-busy="true"]
    .product-archive__empty {
        transition:
            none;
    }

    .product-catalog-results[aria-busy="true"]::after {
        animation:
            none;

        border-color:
            var(--color-accent);
    }
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    48rem
) {
    .product-archive {
        padding-block:
            var(--space-xl)
            var(--space-2xl);
    }

    .product-archive__header {
        margin-bottom:
            var(--space-xl);
    }

    .product-archive__footer {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            var(--space-lg);

        margin-top:
            var(--space-2xl);

        padding-top:
            var(--space-xl);
    }

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    37.5rem
) {
    .product-archive__footer {
        gap:
            var(--space-md);
    }

    .product-archive__empty {
        padding:
            var(--space-lg);
    }

    .product-archive__empty-reset {
        width:
            100%;
    }
}