#warehouseInventoryFilters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  align-items: end;
  gap: 10px;
  margin-bottom: 18px;
}

#warehouseInventoryFilters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#warehouseInventoryFilters label.search {
  grid-column: span 2;
}

#warehouseInventoryFilters input,
#warehouseInventoryFilters select {
  width: 100%;
  min-width: 0;
}

#warehouseInventoryFilters .button {
  align-self: end;
}

@media (max-width: 640px) {
  #warehouseInventoryFilters label.search { grid-column: span 1; }
}

.variant-inventory-panel { margin-top: 24px; padding: 24px; background: #f7faff; border: 1px solid #d9e6f4; border-radius: 18px; }
.variant-inventory-panel[hidden] { display: none; }
.variant-inventory-context { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #344b66; }
.variant-inventory-context strong { padding: 6px 12px; border-radius: 20px; background: #e6effa; color: #24578b; }
.variant-inventory-note, .variant-unassigned p { font-size: 13px; line-height: 1.7; color: #62748a; }
.variant-quantity { text-align: right; font-variant-numeric: tabular-nums; }
.variant-status { font-size: 12px; color: #27694b; background: #eaf5ee; padding: 4px 9px; border-radius: 12px; white-space: nowrap; }
.variant-status.is-inactive { color: #6d7380; background: #eef0f3; }
.variant-unassigned { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 18px; background: #fff8e9; border: 1px solid #eee0bc; border-radius: 12px; color: #795b24; }
.variant-unassigned p { margin: 6px 0 0; }
.variant-unassigned > b { font-size: 28px; font-variant-numeric: tabular-nums; }
.variant-inventory-error { padding: 16px; color: #8c3636; background: #fff2f1; border-radius: 10px; line-height: 1.7; }
.variant-inventory-panel .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 640px) { .variant-inventory-panel { padding: 14px; } .variant-inventory-panel .panel-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; } }
.variant-inventory-panel .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.variant-inventory-panel .panel-heading span { color: #62748a; font-size: 12px; }
.variant-inventory-panel .panel-heading h3 { margin: 6px 0 0; }