:root{
  /* Hier die Spalten fuer verschiedene Displaygroessen Einstellen: 
  xl -> Desktop 
  md ->Tablet
  sm -> Smartphone  (in etwa) */
  --columns-xl:33% 33% 33%;
  --columns-md:50% 50%;
  --columns-sm:1fr;
}
@media (min-width: 1200px){ 
    .s-main-column .s-panel-body{
    max-width: 100%;
    display: grid;
    grid-template-columns: var(--columns-xl);
    gap: 10px 10px;
  }
}
@media (min-width: 768px) and (max-width:1200px){
    .s-main-column .s-panel-body{
    max-width: 100%;
    display: grid;
    grid-template-columns: var(--columns-md);
    gap: 10px 10px;
  }
}
@media (max-width:768px){
    .s-main-column .s-panel-body{
    max-width: 100%;
    display: grid;
    grid-template-columns: var(--columns-sm);
    gap: 10px 10px;
  }
}
.s-main-column .s-panel-body [class*="col-"]{
  align-items: stretch;
  height:100%;
  max-height: 100%;
  max-width: 100%;
}
.s-item-container .card{
  height:100%;
}
.s-item-container .card-body{
  display: flex;
  flex-direction: column;
  flex-grow: stretch;
}
.shop .s-item-container .s-product-cart-controls{
  flex-grow: 4;
  align-items: flex-end;
  display: flex;
}
.shop .s-item-container .s-product-cart-controls .add-cart-item-form{
  flex:0 0 100%;
}

.s-product-name , .s-product-name a{
    color: black;
}

.s-container-name , .s-container-name a{
    color: black;
}

.s-item-total .price-tag, .s-product-price .price-tag{
    color:#074928 !important;
}

header.navbar {
    position: sticky;
}


@media (min-width: 1200px){
    .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: calc(var(--header-height-xl) + 1em);
    }
    .s-filter-column>div{
        position: -webkit-sticky;
        position: sticky;
        top: 4em;
    }
}

@media (min-width: 768px) and (max-width:1200px){
    .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: calc(var(--header-height-md) + 1em);
    }
    .s-filter-column>.navbar{
        position: -webkit-sticky;
        position: sticky;
        top: 8em;
    }
}

@media (max-width:768px){
    .s-main-column .s-panel-body{
        max-width: 100%;
        display: grid;
        grid-template-columns: var(--columns-sm);
        gap: 10px 10px;
    }
}