@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth,slnt,GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC@20,250,100,0,75,468,96,79,-203,738,514,712');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 20px;
  font-variation-settings: 'opsz' 20, 'wght' 250, 'wdth' 100, 'slnt' 0, 'GRAD' 75, 'XTRA' 468, 'YOPQ' 96, 'YTAS' 79, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712;
  background: #fff;
  color: #1a1a2e;
  padding: 2rem;
}

#logo {
  display: block;
  margin: 1.5rem auto 3rem;
  width: 55%;
  max-width: 500px;
}

#bg-bars {
  position: fixed;
  left: 0;
  bottom: 0;
  width: clamp(100px, calc(100vw - 1110px), 400px);
  height: 100vh;
  background: url('back.svg') no-repeat left bottom / auto 100%;
  pointer-events: none;
  z-index: -1;
}

#bg-png {
  position: fixed;
  left: 0;
  bottom: 8px;
  transform: translateX(-20%);
  width: clamp(250px, calc(100vw - 1110px), 1140px);
  aspect-ratio: 1500 / 952;
  background: url('hero_motors_sie.png') no-repeat left bottom / cover;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 1630px) {
  #bg-bars { display: none; }
  #bg-png { display: none; }
}

#partner-logo {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(180px, calc((100vw - 1110px) * 12 / 89 + 180px), 300px);
  height: auto;
  pointer-events: none;
  z-index: -1;
}

#app {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.filter-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.filter-row select {
  flex: 1;
  min-width: 140px;
  padding: 0.6rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 1.6rem;
  background: #fff;
  cursor: pointer;
}



table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th, td {
  padding: 0.4rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid #eee;
  font-size: 0.72rem;
}

th:first-child, td:first-child {
  text-align: left;
}

th {
  color: #666;
  white-space: nowrap;
  border-bottom: 1px solid #ccc;
}

tr:last-child td { border-bottom: none; }

.placeholder {
  text-align: center;
  color: #bbb;
  padding: 3rem 1rem;
}

.count {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: #999;
}

.stock-low { color: #000; }
.stock-ok { color: inherit; }
.eff-hint { cursor: help; font-size: 1.1rem; vertical-align: middle; line-height: 1; }

.sortable { cursor: pointer; user-select: none; }
.sortable:hover { background: #f5f5f5; }
.sort-asc::after,
.sort-desc::after {
  content: '';
  display: inline-block;
  margin-left: 4px;
  border: 4px solid transparent;
  vertical-align: middle;
}
.sort-asc::after {
  border-bottom-color: #000;
  border-top: none;
}
.sort-desc::after {
  border-top-color: #000;
  border-bottom: none;
}