/* Final layout fix: cart separated + smaller category buttons */
html{scroll-behavior:smooth!important;}
#categories,#products,#cart{scroll-margin-top:120px!important;}

/* Header Schnellbuttons kompakt */
.header-quick-links{display:flex!important;gap:8px!important;align-items:center!important;margin-left:auto!important;}
.header-quick-btn{
  min-height:38px!important;
  padding:9px 13px!important;
  border-radius:999px!important;
  font-size:12px!important;
  letter-spacing:.01em!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.055))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.header-quick-btn:hover{background:linear-gradient(135deg,#ff8a1c,#ff3d68)!important;}

/* Kategorie-Buttons: wieder klein/kompakt wie vorher */
.tab-container{
  max-width:1180px!important;
  margin:12px auto 16px!important;
  padding:10px!important;
  overflow:visible!important;
}
.tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:7px!important;
  overflow:visible!important;
  overflow-x:visible!important;
  width:100%!important;
}
.tabs button,.tab,.category-tab-img,.tab.utility{
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1.1!important;
  white-space:normal!important;
  text-align:left!important;
}
.tab.utility{padding:8px 11px!important;}
.category-tab-img img{
  display:block!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  border-radius:999px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:rgba(255,255,255,.12)!important;
  padding:3px!important;
  box-sizing:border-box!important;
}
.category-tab-img span{font-size:12px!important;max-width:112px!important;line-height:1.1!important;}
.search-box{width:100%!important;max-width:620px!important;margin:10px auto 0!important;}

/* Warenkorb wirklich eigenständig, Produkte nicht im Warenkorb */
.shop-layout{
  max-width:1320px!important;
  margin:0 auto!important;
  padding:0 14px 36px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  grid-template-areas:
    "activity cart"
    "deal cart"
    "legend cart"
    "products cart"!important;
  gap:12px 16px!important;
  align-items:start!important;
}
#liveActivityBox{grid-area:activity!important;margin:0!important;max-width:none!important;}
#dailyDealBox,.dailyDealBox,.heroDailyDeal{grid-area:deal!important;}
.legend{grid-area:legend!important;}
#cart{
  grid-area:cart!important;
  position:sticky!important;
  top:122px!important;
  align-self:start!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  z-index:2!important;
  clear:both!important;
}
#products{
  grid-area:products!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(165px,1fr))!important;
  gap:10px!important;
  width:100%!important;
  max-width:none!important;
  padding:0!important;
  align-items:stretch!important;
  clear:both!important;
}
.product-stage{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(165px,1fr))!important;gap:10px!important;}
.product{min-width:0!important;padding:11px!important;border-radius:16px!important;}
.product h4{font-size:13px!important;line-height:1.22!important;min-height:42px!important;}
.discounted-price{font-size:18px!important;}
.quantity-container button{width:28px!important;height:28px!important;}
.quantity-container input{width:40px!important;height:28px!important;}

/* Mobile: Warenkorb und Produkte untereinander, Kategoriebuttons bleiben klein */
@media(max-width:980px){
  .shop-layout{
    max-width:720px!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"activity" "deal" "legend" "products" "cart"!important;
    gap:12px!important;
    padding:0 10px 28px!important;
  }
  #cart{position:relative!important;top:auto!important;}
  #products,.product-stage{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  #categories,#products,#cart{scroll-margin-top:145px!important;}
  .header-quick-links{order:3!important;width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;margin-left:0!important;gap:8px!important;}
  .header-quick-btn{width:100%!important;min-height:38px!important;padding:9px 10px!important;font-size:12px!important;}
  .tabs{justify-content:flex-start!important;gap:7px!important;}
  .tabs button,.tab,.category-tab-img,.tab.utility{font-size:11px!important;padding:6px 8px!important;}
  .category-tab-img img{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;}
  .category-tab-img span{font-size:11px!important;max-width:96px!important;}
}
@media(min-width:1320px){
  #products,.product-stage{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important;}
}


/* Mobile: Warenkorb steht nach den Produkten, damit sein Höhenwechsel beim ersten Hinzufügen nicht die Produktposition verschiebt. */
@media(max-width:980px){
  .shop-layout{grid-template-areas:"activity" "deal" "legend" "products" "cart"!important;}
  #cart{position:relative!important;top:auto!important;}
}