:root {
    /* Hier die Spalten fuer verschiedene Displaygroessen Einstellen:
    xl -> Desktop
    md ->Tablet
    sm -> Smartphone  (in etwa) */
    --columns-xl: 100%;
    --columns-md: 100%;
    --columns-sm: 100%;
}

.s-info-container {
    display: none;
}

.s-main-column {
    background-color: #dddddd;
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 0.5em;
}

.s-item-container .card .card-body {
    display: grid;
    grid-template: 'name controls price';
    grid-template-columns: 39% 23% 40%;
    padding: 0;
}

@media (min-width: 1200px) {
    :root {
        --scale: 100%;
        --name-scale: 1.2rem;
    }

    .align-items-start .col-2 {
        display: None;
    }

    .align-items-start .col-10 {
        padding-left: 1em;
    }

    .s-main-column .s-panel-body {
        display: grid;
        grid-template-columns: var(--columns-xl);
        gap: 10px 10px;
    }

    .s-sidebar > div {
        position: -webkit-sticky;
        position: sticky;
        top: 4em;
    }

    .s-filter-column > div {
        position: -webkit-sticky;
        position: sticky;
        top: 4em;
    }

    .s-item-container .s-product-cart-controls {
        padding-left: 1em;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    :root {
        --scale: 100%;
        --name-scale: 1.3rem;
    }

    .s-main-column .s-panel-body {
        display: grid;
        grid-template-columns: var(--columns-md);
        gap: 10px 10px;
    }

    .s-filter-column > div {
        position: -webkit-sticky;
        position: sticky;
        top: 5em;
    }

    .s-filter-column > .navbar {
        position: -webkit-sticky;
        position: sticky;
        top: 8em;
    }

    .s-item-container .card .card-body {
        display: grid;
        grid-template: 'name price'
                 'none controls';
        grid-template-columns: 65% 30%;
        padding: 0;
    }

    .s-item-container .card .card-body h5 {
        font-size: 1rem;
        padding-left: 0em !important;
    }

    .s-item-container .align-items-start .col-10 {
        flex-direction: column;
        justify-content: center !important;
    }

    .s-item-container .align-items-start .col-2 {
        display: None;
    }

    .s-item-container .s-product-cart-controls {
        padding-left: 1em;
    }
}

@media (max-width: 768px) {
    :root {
        --price-font-scale: 0.9rem;
        --name-scale: 1rem;
    }

    .s-main-column .s-panel-body {
        display: grid;
        grid-template-columns: var(--columns-sm);
        gap: 10px 10px;
    }

    .s-item-container .card .card-body {
        display: grid;
        grid-template: ' name name'
                   'none price'
                   'controls controls';
        grid-template-columns: 50% 50%;
        padding: 0;
    }

    .s-item-container .card .card-body h5 {
        padding-left: 0em !important;
    }

    .s-item-container .align-items-start .col-10 {
        flex: 0 0 100%;
    }

    .cart-item-quantity-wrapper > .d-flex {
        justify-content: space-around !important;
    }

    .s-quantity-selector {
        max-width: 65%;
    }

    .s-quantity-selector > .input-group-append, .s-quantity-selector > .input-group-prepend {
        display: block;
        width: 20%;
    }

    .increase-cart-item-quantity, .decrease-cart-item-quantity {
        width: 100%;
    }

    .add-cart-item {
        margin-top: 0em !important;
        width: 100%;

    }

    .add-cart-item-button-wrapper {
        width: 30% !important;
    }

    .s-product-name {
        justify-content: center;
    }

    .s-item-container .s-product-cart-controls {
        padding-left: 0.2em;
        padding-right: 0.2em;
        flex-wrap: nowrap;
    }

    .s-item-container .align-items-start .col-2 {
        display: None;
    }

    .s-main-column .s-item-container .s-product-cart-controls .cart-item-quantity {
        max-width: unset !important;
    }

    .s-main-column .s-item-container .s-product-cart-controls .cart-item-quantity-wrapper > .d-flex {
        flex-wrap: wrap;
    }
}

.s-main-column .s-panel-body [class*="col-"] {
    align-items: stretch;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}

.s-item-container .mb-2 {
    display: none;
}

.s-product-image-carousel {
    display: flex;
    justify-content: center;
    min-height: 100%;
    flex-direction: column;
}

.s-item-container .image {
    background-size: cover !important;
}

.s-item-container .card .card-body h5 {
    font-size: var(--name-scale);
    display: flex;
    align-items: center;
    padding-left: 1em;
    grid-area: name;
}

.s-item-container .s-product-cart-controls {

    grid-area: controls;
    display: flex;
    align-items: center !important;
    justify-content: center;
}

.s-item-container .cart-item-quantity-wrapper label {
    display: None
}

.cart-item-quantity-wrapper {
    margin-top: 0em !important;
}

.s-item-container .align-items-start {
    font-size: var(--price-font-scale);
    grid-area: price;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.s-item-container .s-container-name {
    display: none;
}

.s-item-container .align-items-start .col-10 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s-item-container .align-items-start .small {
    margin: 0;
}

.s-internal-number{
    Display: block;
    color: #9fcb67;
    margin-top: 30px;
}

.s-item-container .s-unit-price, .s-item-container .s-product-price{
    margin-right: 30px;
}
.s-item-container .s-product-price{
    margin-top: 10px;

}
@media (min-width: 768px) and (max-width: 1200px) {
    .s-item-container .s-unit-price, .s-item-container .s-product-price{
        margin-right: 0px;
    }
    .s-item-container .s-product-price{
        margin-top: 10px;

    }
}

a {
    color: #9fcb67;
}

.s-item-total .price-tag, .s-product-price .price-tag{
    color:#e45a12 !important;
}
footer{
    background-color: #9fcb67;
    border-color: #9fcb67;
}



.btn.btn-sm.btn-danger.action-patch.action-cancel {
    display: none;
}

.btn.btn-sm.btn-warning.action-edit {
    display: none;
}