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.5rem 1rem 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;
        }
    }

    /* focus state */
    mat-form-field.mat-form-field-appearance-legacy.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.mat-form-field-appearance-legacy.mat-form-field-invalid {
        .mat-form-field-flex {
            box-shadow: #a94438 1.95px 1.95px 0.005px !important;
        }
    }

    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;
        }

        .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;
    }

}