webshop-shop-gateway {

    .responsive-div {
        width: 100%;
        padding: 0 1rem !important;
        max-width: unset !important;
    }

    .page-content {
        width: 100%;
        margin-top: 0 !important;
    }

    .category-tab {
        border-radius: 10px !important;
        box-shadow: rgb(0 0 0 / 35%) 1.95px 1.95px 0.005px !important;
        border: none !important;
    }

    .side-cart-body {
        height: calc(100vh - calc(600px + var(--cart-offset)));
        overflow: auto;
        scrollbar-width: thin;
    }

    .cart-line {
        padding: 1rem !important;
    }

    .cart-final-summary {
        padding: 0 1rem !important;
    }

    .product-image-container img {
        border-radius: 15px !important;
    }

    .cart-summary {
        border: 2px solid var(--theme-primary);
        border-radius: 15px;
        background: white;
        box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px -2px inset, rgba(0, 0, 0, 0.5) 2px 2px 2px -2px;
    }

    .products-container {

        &.grid>div.product {
            flex: 0 0 33% !important;
            max-width: 33% !important;
            padding: 0.2rem !important;

            .product-description {
                color: black;
                font-size: 1.1rem !important;
            }

            .product-price {
                color: black;
                font-size: 1.1rem !important;
            }

            .product-wrapper {
                border: 1px solid black !important;
                box-shadow: rgb(0 0 0 / 40%) 1.95px 2.95px 2.8px !important;
                border-radius: 15px !important;
                height: 100%;
            }
        }

    }

    .product-title {
        font-weight: 600 !important;
        color: black !important;
        font-size: 1.6rem !important;
    }

    .product-image-container {
        border-radius: 15px !important;
    }

    .products-search-container {
        
        .mat-form-field-wrapper {
            padding: 1rem 0;
        }
    }


    mat-form-field.mat-form-field-appearance-legacy {
        
        .mat-form-field-flex {
            border-radius: 10px !important;
            border: 1px solid transparent;
            background-color: rgb(255 255 255) !important;
            padding: 0 1rem 0 1rem !important;
            align-items: center !important;
            box-shadow: rgb(0 0 0 / 35%) 1.95px 1.95px 0.005px !important;
        }
        
        .mat-form-field-underline {
            display: none;
        }
        
        .mat-form-field-label-wrapper {
            top: -1.2em;
        }
        
        .mat-form-field-infix {
            padding: 0.2em 0;
        }
        
        .mat-form-field-subscript-wrapper {
            position: relative !important;
            margin-top: 8px !important;
            padding-left: 1rem;
        }

        /* focus state */
        &.mat-focused {
            
            .mat-form-field-flex {
                box-shadow: rgb(0 0 0 / 85%) 1.95px 1.95px 0.005px !important;
            }
        }

        /* error state */
        &.mat-form-field-invalid {
            
            .mat-form-field-flex {
                box-shadow: #a94438 1.95px 1.95px 0.005px !important;
            }
        }

        .intl-tel-input {
            position: absolute;
            inset: 4px 0 0;
        }

        .intl-tel-input.separate-dial-code .selected-flag {
            background-color: rgb(0 0 0 / 5%);
            border-radius: 10px 0 0 10px;
        }
    }

    .cart-fab {
        bottom: 60px !important;
    }

}