.product-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );

    gap: var(--space-2xl);
    
    margin-bottom: var(--space-xl);
}

 [data-product-track-root] .product-catalog-results__view-controls,
 [data-product-track-root] .home-section__view-controls {
     display:
         flex;
 
     justify-content:
         flex-end;
 
     margin-bottom:
         var(--space-lg);
 }
 
 [data-product-track-root] .product-catalog-results__view-toggle,
 [data-product-track-root] .home-section__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;
 }

[data-product-track-root] {
    position:
        relative;
}

[data-product-track-root] .product-track__navigation {
    display:
        none;

    position:
        absolute;

    inset-block-start:
        clamp(18rem, 26vw, 24rem);

    inset-inline:
        0;

    z-index:
        4;

    pointer-events:
        none;
}

[data-product-track-root] .product-track__nav {
    position:
        absolute;

    top:
        50%;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        3rem;

    height:
        3rem;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-border) 62%,
            var(--color-accent)
        );

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--color-surface) 92%,
            transparent
        );

    color:
        var(--color-text);

    box-shadow:
        0 12px 30px rgba(77, 50, 30, 0.14);

    backdrop-filter:
        blur(12px);

    pointer-events:
        auto;

    transition:
        box-shadow 160ms ease,
        opacity 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

[data-product-track-root] .product-track__nav:hover {
    box-shadow:
        0 16px 34px rgba(77, 50, 30, 0.16);

    background:
        color-mix(
            in srgb,
            var(--color-surface) 96%,
            var(--color-accent)
        );
}

[data-product-track-root] .product-track__nav:active {
    box-shadow:
        0 10px 24px rgba(77, 50, 30, 0.12);
}

[data-product-track-root] .product-track__nav:focus-visible {
    outline:
        2px solid
        var(--color-accent);

    outline-offset:
        3px;
}

[data-product-track-root] .product-track__nav--prev {
    inset-inline-start:
        0.25rem;
}

[data-product-track-root] .product-track__nav--next {
    inset-inline-end:
        0.25rem;
}

[data-product-track-root] .product-track__nav[hidden] {
    display:
        none !important;
}
 
 [data-product-track-root] .product-track__load-more {
     display:
         none;
 
    position:
        relative;

     align-items:
         center;
 
     justify-content:
         center;
 
    flex:
        0 0 clamp(4.5rem, 18vw, 6.5rem);

    width:
        clamp(4.5rem, 18vw, 6.5rem);
 
     min-height:
        clamp(10rem, 28vw, 16rem);
 
    margin-inline-start:
        var(--space-lg);

    margin-inline-end:
        clamp(1.25rem, 5vw, 4rem);

    padding:
        var(--space-md);
 
     border:
        1px solid
        color-mix(
            in srgb,
            var(--color-border) 72%,
            var(--color-accent)
        );
 
     border-radius:
        1.25rem;
 
     background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--color-surface) 88%,
                var(--color-accent)
            ),
            color-mix(
                in srgb,
                var(--color-surface) 78%,
                var(--color-accent)
            )
        );

    box-shadow:
        0 10px 28px rgba(77, 50, 30, 0.10);
 
     color:
         var(--color-text);
 
     cursor:
         pointer;

    scroll-snap-align:
        start;

    scroll-margin-inline-end:
        clamp(1.25rem, 5vw, 4rem);

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

[data-product-track-root] .product-track__load-more::before {
    position:
        absolute;

    inset:
        0.75rem;

    content:
        "";

    border-radius:
        inherit;

    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--color-accent) 30%,
                transparent
            ) 0,
            transparent 68%
        );

    opacity:
        0.45;

    pointer-events:
        none;
 }

[data-product-track-root] .product-track__load-more-glyph {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        2.2rem;

    height:
        2.2rem;

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--color-surface) 72%,
            transparent
        );

    box-shadow:
        inset 0 0 0 1px color-mix(
            in srgb,
            var(--color-border) 70%,
            transparent
        );
}

[data-product-track-root] .product-track__load-more-glyph svg {
    display:
        block;
}
 
 [data-product-track-root][data-view-mode="track"] .product-grid {
     display:
         flex;
 
     gap:
         var(--space-lg);
 
     overflow-x:
         auto;
 
    padding-inline-start:
        clamp(3.5rem, 8vw, 5rem);

    padding-inline-end:
        clamp(3.5rem, 8vw, 5rem);

     padding-bottom:
         0.35rem;
 
     scroll-snap-type:
         x mandatory;
 
     overscroll-behavior-inline:
         contain;
 }
 
 [data-product-track-root][data-view-mode="track"] .product-card {
     flex:
         0 0 clamp(220px, 62vw, 280px);
 
     max-width:
         280px;
 
     height:
         auto;
 
     scroll-snap-align:
         start;
 }
 
 [data-product-track-root][data-view-mode="track"] .product-track__load-more {
     display:
         inline-flex;
 }

[data-product-track-root][data-view-mode="track"] .product-track__navigation {
    display:
        block;
}

[data-product-track-root][data-view-mode="track"] .navigation.pagination {
    display:
    none !important;
}

[data-product-track-root] .product-track__load-more:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 34px rgba(77, 50, 30, 0.14);
}

[data-product-track-root] .product-track__load-more:focus-visible {
    outline:
        2px solid
        var(--color-accent);

    outline-offset:
        4px;
}
 
 @media (pointer: coarse) {
    [data-product-track-root] .product-track__navigation {
        display:
            none !important;
    }

     [data-product-track-root][data-view-mode="track"] .product-card {
         flex-basis:
             clamp(210px, 76vw, 300px);
 
         max-width:
             300px;
     }

    [data-product-track-root] .product-track__load-more {
        flex-basis:
            clamp(5.5rem, 26vw, 7.5rem);

        width:
            clamp(5.5rem, 26vw, 7.5rem);

        min-height:
            clamp(11rem, 42vw, 18rem);

        margin-inline-start:
            var(--space-xl);

        margin-inline-end:
            clamp(1.5rem, 8vw, 5rem);
    }
 }
@media (max-width: 768px) {

    .product-grid {

        grid-template-columns: 1fr;

        gap: var(--space-lg);
    }

    [data-product-track-root][data-view-mode="track"] .product-grid:has(> .product-card:first-of-type:last-of-type) {
        justify-content:
            center;

        overflow-x:
            hidden;

        scroll-snap-type:
            none;
    }

    [data-product-track-root][data-view-mode="track"] .product-grid:has(> .product-card:first-of-type:last-of-type) > .product-card {
        margin-inline:
            auto;
    }
}

@media (max-width: 480px) {

    .product-grid {

        grid-template-columns: 1fr;
    }
}