@scope (.products-container) {
    scroll-margin-top: 180px; /* match your navbar height| pushes the section lower than top of screen */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-block: var(--space-4);
    margin: 0;

    & .table-title {
        font-size: var(--font-size-5xl);
        line-height: var(--line-head-5xl);
    }

    & .products-table {
        background-color: none;
        cursor:default;
        padding: var(--space-4);
        border-collapse: separate; /* Allow padding to be properly applied */

        & tbody {

            & tr {
                
                &:hover > * {
                    background-color: var(--neutral-lightest);
                }
                
                & > * {
                    background-color: var(--white);
                    border-color: var(--neutral-lightest);
                }

                & .product-col {
                    max-width: 38%;
                }

                & .thickness-col {
                    & .thickness-placeholder {
                        color: var(--black);
                        letter-spacing: normal;
                    }
                }

                & .variant-col {
                    width: 22%;

                    & select {
                        margin: 0;
                    }
                }

                & .sku-col {
                    width: 15%;

                    & .sku-placeholder {
                        letter-spacing: normal;
                    }
                }

                & .action-col {
                    width: 25%;

                    & .action-container {
                        display: flex;
                        flex-direction: row;
                        gap: var(--space-1);
                        justify-content: end;
                        align-items: center;

                        & .btn,
                        & .secondary-btn {
                            display: flex;
                            flex-direction: row;
                            gap: 5px;
                            align-items: center;
                            justify-content: center;

                            & .btn-icon {
                                width: 20px;
                                height: 20px;
                            }
                        }
                    }
                }
            }

        
        }
    }
}