commerce/components/home/styles.module.scss

@use 'styles/_typography';

@mixin home-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    column-gap: 10px;
}

.homeNav {
    padding: 51px 115px 22px 115px;

    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: baseline;

    :global .information {
        @include typography.header-cta;
    }
}

.typesNav {
    text-align: center;

    .filter {
        @include typography.body;
    }

    .notLink {
        @include typography.body-cta;

        text-decoration-line: none;
    }

    .link {
        @include typography.body-cta;
    }
}

.homeProductsList {
    @include home-grid;

    row-gap: 20px;
    padding-bottom: 364px;

    > {
        li {
            grid-column-end: span 8;

            &.featured {
                grid-column-end: span 14;
            }

            &:has(+ .featured:nth-child(2n + 1)) {
                grid-column-end: span 10;
            }
        }

        li.featured:nth-child(2n) + li {
            grid-column-end: span 10;
        }
    }
}

.homeProduct {
    text-decoration-line: none;

    display: flex;
    flex-direction: column;
    gap: 10px;

    .title,
    .collections {
        @include typography.subheader;
    }
}

.homeFooter {
    @include home-grid;

    > p {
        @include typography.body;

        grid-column-end: span 10;
    }

    > *:last-child {
        grid-column-end: span 4;
    }
}