/* STAFF-REDESIGN-4C – Manuell: Artikelansicht & mobile Fahrzeugfelder repariert */

/* Schritt 1: Kino / Reihe / Auto auch am Handy nebeneinander halten */
@media(max-width:520px){
  .manual-screen .field-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .manual-screen .field-block:not(.wide){min-width:0!important;}
  .manual-screen .field-block.wide{grid-column:1/-1!important;}
  .manual-screen .field-block label{font-size:10px!important;letter-spacing:.12em!important;}
  .manual-screen .select,
  .manual-screen .small-input{
    min-height:44px!important;
    padding:0 9px!important;
    font-size:13px!important;
    border-radius:12px!important;
  }
  .manual-screen select.select{
    background-position:0 0,calc(100% - 14px) 19px,calc(100% - 9px) 19px!important;
    padding-right:24px!important;
  }
}

/* Kategorie-Dropdown klar als Kategorieauswahl darstellen */
.manual-screen .shop-controls{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
.manual-screen .categoryPills{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}
.manual-screen .categoryPills::before{
  content:'Kategorie';
  display:block;
  margin:0 0 6px 2px;
  color:var(--subtle);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.manual-screen #productCategorySelect{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-height:48px!important;
  border-radius:14px!important;
  border:1px solid var(--line)!important;
  background-color:rgba(255,255,255,.045)!important;
  color:var(--text)!important;
  font-size:14px!important;
  font-weight:850!important;
  padding:0 36px 0 14px!important;
  color-scheme:dark!important;
}
.manual-screen #productCategorySelect option{
  background:#171c26!important;
  color:#f4f6fb!important;
}
.manual-screen .search-input{
  width:100%!important;
  max-width:100%!important;
}

/* Alte Icon-CSS hatte .productRowIcon auf 38px begrenzt – komplett zurücksetzen */
.manual-screen #manualProducts,
.manual-screen .product-list.products{
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  overflow:visible!important;
}
.manual-screen .product-list.products .productRow,
.manual-screen .product-list.products .productRowIcon,
.manual-screen .productRow.productRowIcon,
.manual-screen button.productRow.productRowIcon{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:68px!important;
  max-height:none!important;
  flex:initial!important;
  flex-basis:auto!important;
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr) auto 34px!important;
  gap:11px!important;
  align-items:center!important;
  justify-content:stretch!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  overflow:visible!important;
  text-align:left!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
}
.manual-screen .productRow .prodIcon{
  box-sizing:border-box!important;
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  max-width:50px!important;
  min-height:50px!important;
  max-height:50px!important;
  padding:4px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  flex:none!important;
  background:rgba(245,196,0,.07)!important;
  border:1px solid rgba(245,196,0,.14)!important;
}
.manual-screen .productRow .manualProductThumb,
.manual-screen .productRow .aklProductIcon,
.manual-screen .productRow .aklProductIconImg{
  display:block!important;
  width:40px!important;
  height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  object-fit:contain!important;
  border-radius:10px!important;
  transform:none!important;
}
.manual-screen .productRow .prodText{
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
}
.manual-screen .manualProductTitle{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
}
.manual-screen .manualProductName{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1.15!important;
  color:var(--text)!important;
}
.manual-screen .productRow small,
.manual-screen .manualBundleComponents{
  display:block!important;
  color:var(--muted)!important;
  font-size:11px!important;
  line-height:1.25!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.manual-screen .prodPrice{
  white-space:nowrap!important;
  font-size:13px!important;
  color:var(--yellow)!important;
}
.manual-screen .plusBubble{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  font-size:20px!important;
  line-height:1!important;
}
.manual-screen .productEmptyState{
  width:100%!important;
  box-sizing:border-box!important;
}

@media(max-width:420px){
  .manual-screen .product-list.products .productRow,
  .manual-screen .product-list.products .productRowIcon,
  .manual-screen .productRow.productRowIcon,
  .manual-screen button.productRow.productRowIcon{
    grid-template-columns:46px minmax(0,1fr) auto 32px!important;
    gap:9px!important;
    padding:9px 10px!important;
  }
  .manual-screen .productRow .prodIcon{
    width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;min-height:46px!important;max-height:46px!important;
  }
  .manual-screen .productRow .manualProductThumb,
  .manual-screen .productRow .aklProductIcon,
  .manual-screen .productRow .aklProductIconImg{
    width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important;
  }
  .manual-screen .manualProductName{font-size:13.5px!important;}
}