/*
================================================
Space Vanta Theme 1.0

Module:
Product Grid

File:
public/product-grid/product-grid.css

Purpose:
Product Grid Layout Layer

Version:
1.2

Visual Direction:
Exhibit Gallery Density
================================================
*/


/*
================================================
Product Grid
================================================
*/

.sv-product-grid {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding: 44px 24px 48px;

    box-sizing: border-box;
}


/*
================================================
Collection Selector
================================================
*/

.sv-product-selector {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 36px;

    margin-bottom: 30px;
}

.sv-product-selector__item {
    position: relative;

    background: none;
    border: none;

    padding: 7px 0;

    font-size: 16px;
    line-height: 1.4;

    cursor: pointer;
    color: inherit;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.sv-product-selector__item:hover {
    opacity: 0.7;
}

.sv-product-selector__item.is-active {
    font-weight: 600;
}

.sv-product-selector__item.is-active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 100%;
    height: 2px;

    background: currentColor;
}


/*
================================================
Product Grid Items
================================================
*/

.sv-product-grid__items {
    display: grid;

    /*
  Allows 3 products to fill the gallery naturally.
  When 4 products are available, the grid becomes 4 columns.
  */
    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 26px;

    width: 100%;
}


/*
================================================
Product Card Position
================================================
*/

.sv-product-grid__items .sv-product-card {
    width: 100%;
    min-width: 0;
}


/*
================================================
View All
================================================
*/

.sv-product-grid__view-all-link {
    display: block;

    width: fit-content;

    margin: 26px auto 0;

    padding: 4px 0;

    color: inherit;

    font-size: 14px;
    line-height: 1.4;

    text-decoration: none;

    border-bottom: 1px solid currentColor;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.sv-product-grid__view-all-link:hover {
    opacity: 0.65;

    transform: translateY(-1px);
}


/*
================================================
Mobile
================================================
*/

@media (max-width: 768px) {

    .sv-product-grid {
        max-width: none;

        padding: 32px 16px 40px;
    }


    /*
  ----------------------------------------------
  Collection Selector
  ----------------------------------------------
  */

    .sv-product-selector {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 8px;

        margin-bottom: 22px;
    }

    .sv-product-selector__item {
        font-size: 13px;
        line-height: 1.3;

        padding: 8px 2px;

        text-align: center;

        white-space: normal;
    }


    /*
  ----------------------------------------------
  Product Grid
  ----------------------------------------------
  */

    .sv-product-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px 14px;
    }


    /*
  ----------------------------------------------
  View All
  ----------------------------------------------
  */

    .sv-product-grid__view-all-link {
        margin-top: 22px;

        font-size: 13px;
    }

}